如何使Rails View页面上的所有图像异步加载？

Question

我有一个Rails 4.2.3应用程序，可在其中从各种来源（feedjira，onebox宝石）获取图像到页面上。 一些图像可能会被缓存，并且可以照常加载。 但是，如果一页上有很多这样的页面，则页面加载将花费很长时间。 因此，我希望从客户端javascript / jquery中截取向外发送请求到src链接的图像，请求中止，将src替换为透明gif，并异步下载图像。 我想要的伪代码如下所示：

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.requesting) { 
    this.request.abort();
    this.src = "//path/to/actual/image.jpg";
  }
});

具体来说，我在上面的代码中寻找虚拟的requesting状态和request.abort方法的真实等效项。 我也愿意接受来自rails / jquery库/插件/代码的替代建议。

如果完全相关，我正在使用turbolinks，但是如果出现问题，可以在这些图像加载上禁用它。

Answer 1

为此，我通常会构建一个预加载器。 默认情况下，从asset_pipeline加载.gif以减少加载时间，并在DOM准备就绪时加载外部源：

您认为：

<% @pictures.each do |picture| %>
  <%= image_tag('loader.gif', class: 'preloaded-picture', data: {source: picture.source}) %>
<% end %>

在您的javascript / jQuery中：

$(document).ready(function(){
  $.each($('.preloaded-picture'), function(index, obj){
    var img = new Image();
    img.src = $(obj).attr('data-source');

    $(img).ready(function(){
      $(obj).attr('src', img.src);
    })
  })
});