0

画像のプリロードの進行状況に応じてイベントを発生させる方法について、いくつか提案が必要です。私のサイトには大きな画像がたくさんありますが、そのほとんどはdisplay: none. 画像のちらつきを避けるために、私はこのPOSTを読みましたが、答えはプリロードの良い方法のようです。

しかし、私がやりたいのは、プリロードの特定のステータスでイベントを発生させることです。約 40 枚の画像があり、既に読み込まれている画像が 10 枚ごとにイベントを発生させたいとします。これを処理するにはどうすればよいですか?

私の意図について一言。独自のロード画面を作成したいと思います。プロセスがプリロードされた画像のプロセスに依存する小さなアニメーション。

何かのようなもの：

first10picturesloaded(){ /* do something */ }
next10picturesloaded() { /* do something more */ }
...

前もって感謝します！

編集：リクエストされたとおり、これはプリロードスニペットです

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

    preload([
'img/about_1.gif',
'img/about_2.gif',
'img/contact_2.gif',
'img/contact.gif',
'img/digital_1.gif',
'img/digital_2.gif',
'img/dragged.gif',
'img/loading.gif',
'img/photo_1.gif',
'img/photo_2.gif',
'img/print_1.gif',
'img/print_2.gif',
'img/web_1.gif',
'img/web_2.gif',
'img/about.jpg']); //there are much more pictures in the array
4

1 に答える 1

0

テストされていない

function preload(arrayOfImages, onLoadFunc) {
    $(arrayOfImages).each(function(val){
        $('<img/>').on("load", onLoadFunc).attr("src", val);
    });
}
var remaining = arrayOfImages.length;
preload(arrayOfImages, function(){
    remaining--;
    if (remaining % 10 == 0) {
        //progress
    } else if (remaining == 0) {
        //finished
    }
});

堅牢な実装では、画像のerrorおよびabortイベントもリッスンします。そうしないと、1 つのイメージの読み込みに失敗すると、完了が発生しなくなります。

于 2013-06-23T22:43:38.410 に答える