6

画像をプリロードしようとしていますが、次のコードが機能します。

$(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が回転する「読み込み中」アイコンをタブに表示することです。画像が読み込まれるまで継続的に回転しないようにする方法はありますか? ページとサムネイルをロードしてから、タブに回転アイコンを表示せずに、バックグラウンドで大きな画像のロードを開始したいと思います。

4

3 に答える 3

1

bighostkimの回答のajax部分と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 });
    });
});
于 2013-02-14T15:59:24.250 に答える
1

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

ドキュメントの準備ができたときに画像ファイルを同期的に読み込んでいると思うので、Chromeは読み込みが完了していないことをユーザーに伝えます。

回転する画像を表示しないようにするには、サーバーへの ajax 呼び出しを使用して画像を受信する必要があります。画像をドキュメントに追加するか、何もしないでください (既にキャッシュされているため)。

$.ajax({ url : <<image_url>>, cache: true, processData : false, })
.success(function(){ 
  $(document).append( $("<img/>").attr("src", <<image_url>>).hide() );
});
于 2013-02-14T05:13:59.030 に答える
0

何かを作って画像を10枚追加しました。彼らは喧騒なしでロードします。遅いカメであるインターネットで試してみました。

ブラウザは、関数のすべての画像が完成するまで待つと思います$(document).ready( function() { });.

フィドル

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++;
    });
});
于 2013-02-14T05:10:32.453 に答える