Rails加载大型外部图像而不会崩溃

Question

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

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

＆＃34;缓慢部分＆＃34;在需要之前，可以很容易地隐藏起来......

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

我刚刚实现了图像的延迟加载（http://www.appelsiini.net/projects/lazyload），我认为这可以解决这个问题，但似乎页面仍然会等到所有内容都加载（包括大图像文件）才能显示页面。每个product_item的加载时间仍然相同。

这令人非常沮丧，所以我很想知道如何解决这个问题。

1. 是否可以在Rails中超时部分。即如果＆＃34;缓慢部分＆＃34;还没有在3秒内加载，它应该不显示？
2. 图像的延迟加载是否会解决此类问题？即这是我应该解决问题的地方吗？
3. 我可以通过ajax加载页面的慢速部分来解决这个问题吗？基本上，该部分将显示＆＃34;等待符号＆＃34;直到＆＃34;慢速部分＆＃34;已满载？
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，并且在页面的其余部分加载时它将异步获取这些图像。

通常情况下，如果这些图片只是非常大，并且浏览器无法通过它给出的网址获取它们，那么你会看到那个破损的图像图标。