0

私は2つのコードスニペットを持っています

// Code Snippet One
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

preload([
    'img/One.jpg',
    'img/Two.jpg',
    'img/Three.jpg'
]);​

// Code Snippet Two
function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').hide();
});
  1. コードを使用して、画像を使用する前に画像がプリロードされていることを確認するにはどうすればよいですか?
  2. すべての画像がプリロードされたことを示す通知を起動する方法。ここで使用できる新しい jQuery 1.8 機能はありますか?
  3. コード スニペット 1 と 2 の違いは何ですか。いつ使う？

フィドルの例が最も高く評価されています

プリロードされた画像を div (image-gallery) にロードしようとしている方法は次のとおりです。

setTimeout(function() {
        $('.image-gallery').each(function(){
            // what to put here?
        });
}, 2000);
4

2 に答える 2

1

最初の例では、メモリ内に画像要素を作成し、その src を変更して、プリロードする画像を指すようにします。問題は、ブラウザ (バージョン) によっては、画像が DOM に追加されていない限り、画像の読み込みを開始しないことです。それが、スニペット 2 が行っていることです。

どちらの場合も、.load()イベント ハンドラーを jQuery 画像オブジェクトに追加して、それぞれの画像が読み込まれたときのコールバックを指定できます。

カウンターを使ってみてください。各 .load() ハンドラーのカウンターを増やし、それが画像数に達した場合、すべての画像の読み込みが完了しています。

編集: スニペット 2 をこのように変更します

function preload(arrayOfImages, callback) {
    var counter = 0;    
    $(arrayOfImages).each(function () {
        $('<img />').load(function() {
            counter++;
            if(counter==arrayOfImages.length) callback();
        }).attr('src',this).appendTo('body').hide();
    });
}

そして、このように呼び出します

preload([
'img/One.jpg',
'img/Two.jpg',
'img/Three.jpg'
], function() {
    // what should happen when all of the images have been loaded
    $('<img />').attr('src', 'img/Two.jpg').appendTo('.image-gallery');
});​
于 2012-10-16T09:58:25.107 に答える
0

Jquery Load イベントを検討しましたか。推奨されていませんが、より良い代替品はありません。それは基本的にあなたが望むことをします。

イメージがロードされるとすぐに、ハンドラーが呼び出されます。

于 2012-10-16T09:57:40.813 に答える