Rails在不崩溃的情况下加载较大的外部图像

Question

我有一个XML引用，引用了相当大的外部图像文件（200kb）。它们导致真正的加载时间过长，从而导致页面崩溃。在一个div中，我加载了20个像这样的图像。每个div都在单独的部分中加载。这些部分（product _item）需要40-400毫秒才能加载（！），主要是因为大图像。

外部图像需要是外部的（所以任何AWS解决方案）都不起作用。

的“慢部分”是折叠的下方，可以很容易地隐藏“直到需要”。

<div id="slow-portion"> 
<% @product.each do |product| %> 
<%= render 'product_item' %> 
<% end %> 
</div> 

我刚刚实施，我认为会解决这个问题的图像（http://www.appelsiini.net/projects/lazyload）的延迟加载，但它似乎像页面仍然会等到一切都被加载（包括大型图像文件），它显示的页面之前。每个product_item的加载时间仍然相同。

这是已经非常令人沮丧，所以我想知道，在相当一般来讲，我应该怎么解决这个问题。

1. 是否有可能在Rails中超时部分。即如果“慢速部分”在3秒内未加载，它不应该显示？
2. 图像的延迟加载是否应该解决这类问题？即这是我应该解决问题的麻烦吗？
3. 我可以解决这个页面的慢部分的Ajax加载？基本上，该部分将显示一个“等待符号”，直到“慢速部分”完全加载完毕？
4. 是否有任何其他方式不会导致崩溃（503错误）和超时由于视图加载时间太大？

的任何解决方案，将工作是为我好！

Answer 1

我从来没见过的图像的请求阻止加载一个页面，但如果应用程序被挂起来努力使这些泛音，你真的不能找到一种方法，试图加快速度，那么你可以尝试loading each of those partials using jQuery。这可能只是setup a route that serves out those partials without any layout html around it。

如果有一吨的产品，我也不会在同一时间获取所有的人。所以你必须实现一些能够节制所有这些ajax调用的东西。

然后，您可以添加一个css类到其中部分即将呈现的位置的父div（类似.loading），并添加样式以指示正在加载某个东西。在你的ajax请求完成该部分后被调用的函数中，你可以从该元素中移除该类.loading。

但是你的问题对我来说似乎有点奇怪。你的部分对他们来说没有太大的帮助，所以我希望他们能够在毫秒内完成渲染。到服务器，这些图像只是<img/>标签与其中的网址。它根本不应该尝试渲染图像。这是浏览器的工作。然后，当浏览器获取页面时，它将看到这些<img/>标记源URL，并且它将在加载页面的其余部分时异步获取这些图像。

通常情况下，如果这些图像是只是出奇的大，而浏览器是无法从它被赋予的网址，以获取它，然后你会看到那个小破图像图标，而不是。