レールビューのすべての画像を非同期にロードするにはどうすればいいですか？

Question

私は、さまざまなソース（feedjira、onebox gems）からページに画像を取得するレール4.2.3アプリを持っています。一部の画像はキャッシュされ、通常どおりに読み込むことができます。しかし、1ページに多くのページがあると、ページの読み込みに時間がかかります。したがって、クライアントの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ライブラリ/ plugins/codeからの代替案を公開しています。

私はターボリンクを使用していますが、問題が発生した場合はこれらの画像の読み込みを無効にすることができます。

Answer 1

私は通常、プリローダーを作成します。あなたのビューで

：デフォルトでは、外部ソースをロード時間を短縮し、DOM準備を負荷にするためにあなたのasset_pipelineから.GIFをロードするJavaScriptの/ jQueryので

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

：

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