5

私はJavaScriptを使用して、次のコードでいくつかの画像をプリロードしています:

// do the following for each image where 'this' is the path
(new Image()).src = this;

これは問題なく動作します - firebug では、各反復の後に各イメージのダウンロードが開始されるのを確認できます。

私の問題は、実際のダウンロードが完了するまでブロックしたいということです。つまり、すべての画像のダウンロードが完了するまで、「画像のダウンロード」ダイアログをユーザーに表示したいと考えています。

現在、プリロード ループが実行される前にダイアログを表示する (そしてループが完了した後にダイアログを削除する) と、実際のダウンロードが完了するのではなく、ダウンロード リクエストがキャプチャされるだけです。

実際のダウンロードは非同期のようですが、すべてのダウンロードが完了するまでブロックする方法はありますか?

4

3 に答える 3

2 
$(function () {
    var imgs = $('img');
    var length = imgs.length;
    var loaded = 0;
    $('img').hide().each(function () {
        $(this).bind('load', function () {
            if ((++loaded) === length) {
                imgs.show();
            }else { 
              //show images are still downloading
            }
        });
    });
});
于 2010-12-13T15:10:48.797 に答える
0

プリロードが完了するまで、「読み込み中」の div を表示しながら、画像をプリロードするコンテンツを含む div を非表示にすることができます。次のようになります。

$('#content').hide();
$('#loading').show();

// for loop loading images here

$('#loading').hide();
$('#content').show();
于 2010-12-13T15:07:30.307 に答える
0

onload画像が正常にダウンロードされたときに起動されるメソッドを使用して、onload関数で次のステップを設定できます。

W3 学校のリファレンスは次のとおりです。

http://www.w3schools.com/jsref/event_img_onload.asp

于 2010-12-13T15:07:35.147 に答える