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

Question

我有一个 Rails 4.2.3 应用程序，我可以从各种来源(feedjira、onebox gems)获取图像到页面上。某些图像可能会被缓存，并且可以照常加载。但如果一个页面上有很多这样的内容，则页面加载需要很长时间。因此，从客户端 javascript/jquery，我希望拦截向 src 链接发出请求的图像，请求中止，用透明 gif 替换 src，并异步下载图像。我想要的伪代码如下:

$("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);
    })
  })
});