JavaScriptのプリロードイメージ

Question

は、次のコードは動作します：

$(document).ready(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     var img = new Image(); 
     img.src = "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false"; 
    }); 
}); 

しかし、私が解決したい問題は、Chromeはタブでスピニング「ロード」のアイコンが表示されることです。私はこれを行うことができますので、画像がロードされるまで連続的に回転しませんか？ページとサムネイルをロードしてから、タブの回転アイコンを使わずにバックグラウンドで大きな画像をロードしてください。

Answer 1

、およびload()イベント、私が望むものを得ました

希望の結果を得るには、各ループがload()イベント内にある必要がありました。 ready()イベントに配置すると、イメージがページイメージの前にロードされ、イメージがキューに格納され、プリロードされたイメージの後にロードされます。ほとんどのブラウザでは、同じホストから同時に読み込まれるアイテムがいくつかありますが、別のホストからのものでなければ、スポットが開くまで待たなければなりません。

$(window).load(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     $.ajax({ url : "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false", cache: true, processData : false }); 
    }); 
}); 

Answer 2

何かを加えて、10枚の画像を追加しました。彼らはどんなハッスルと喧騒なしでロードします。私は遅いカメである私のインターネットでそれを試みた。

$(document).ready(function() { });のように、機能のすべての画像が完成するまでブラウザが待機すると思います。

Fiddle

var i = 1; 
$(document).ready(function(){ 
    $(window).stop(); 
    $("img").hide(); 
    $("img").each(function(){ 
     var source = $(this).attr("src"); 
     var img = new Image(); 
     img.className = i; 
     img.src = source; 
     $('body').append(img); 
     $("."+i).hide().fadeIn(); 
     i++; 
    }); 
}); 

Answer 3

はまだ私の考えをテストしていません。

文書の準備ができたら画像ファイルを同期して読み込んでいると思うので、Chromeはユーザーに読み込みが完了していないことを伝えます。 bighostkimの答えのAJAX一部を使用して

スピニング画像を表示しないように、あなたが画像を受信するためにサーバーへのAJAX呼び出しを使用する必要がありますし、（それがすでにキャッシュされていますので）あなたが文書に追加するか、何もできない

$.ajax({ url : <<image_url>>, cache: true, processData : false, }) 
.success(function(){ 
    $(document).append($("<img/>").attr("src", <<image_url>>).hide()); 
});