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

【问题标题】：Rails load large external images without crashingRails 加载大型外部图像而不会崩溃
【发布时间】：2016-01-14 09:50:53
【问题描述】：

我有一个 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 的加载时间仍然相同。

这令人非常沮丧，所以我想知道，笼统地说，我应该如何解决这个问题。

是否可以在 Rails 中使部分超时。 IE。如果“慢速部分”在 3 秒内没有加载，它应该不会显示？
是否应该延迟加载图像来解决此类问题？ IE。这是我应该解决问题的地方吗？
我可以通过 ajax 加载页面的慢速部分来解决这个问题吗？基本上，在“慢速部分”完全加载之前，该部分会显示“等待符号”？
是否有其他方法可以避免因视图加载时间过长而导致崩溃（503 错误）和超时？

任何可行的解决方案都适合我！

【问题讨论】：

您的'product_item' 模板是什么样的？
它有一个标题标题、一个image_tag和一个链接。
所以基本上，浏览器获取图像需要 400 毫秒？不是服务器对<img/> 标签的实际呈现，对吗？如果您要使用curl 或wget 来获取此页面，那么它会加载相对较快吧？
根据“更好的错误”gem，它是部分的。我在 db-requests 中看不到任何真正的延迟，所以我唯一的结论是获取图像需要时间。然而，我的问题更笼统，因为我偶尔会遇到类似的问题（网站的一部分会导致延迟，导致一切崩溃）。基本上，我想对超时进行救援，说“如果你无法在 2 秒内加载这个部分救援并显示'部分未加载'”。这可能吗？

标签： jquery ruby-on-rails ajax

【解决方案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/> 带有 URL 的标签。它根本不应该尝试渲染图像。那是浏览器的工作。然后，当浏览器获取页面时，它会看到那些 <img/> 标记源 URL，它会在加载页面的其余部分时异步获取这些图像。

通常，如果这些图像非常大，并且浏览器无法从提供的 URL 中获取它们，那么您会看到那个破碎的小图像图标。

【讨论】：