0

フォトギャラリーのウェブサイトがあります。ユーザーがサムネイルのいずれかをクリックできるようにする前に、プリロードしたい17の大きな画像があります。最終的な画像が読み込まれたときにページを表示し、ユーザーがサムネイルをクリックしたときに表示する大きな画像があることを確認できます（まだ読み込まれていません）。$ .getScript（）呼び出しからJSON-Pのようなデータを取得するまで、画像のURLはわかりません。

だから、私はhttp://www.stephentang.net/j/photoModule.jsにこのコードを持ってい ます

$.each(self.jsonObj.imageItems, function(index) {
     $("<img />").attr("src", STP.HOSTNAME + self.jsonObj.imageItems[index].imgSrc).load(function() {
     num_left_to_load = num_left_to_load - 1;
     console.log('Left to Load: ' + num_left_to_load);
     if (num_left_to_load <= 0) {
       if (typeof callback === "function") {
            console.log('callback is triggered');
            $("#loading-div").remove();
            self.jqFilmstrip.css('display', 'block');
            self.jqFeaturedPhotoImg.css('display', 'block');
            callback.apply(context);
       }
     }
  });
});

console.log（）ステートメントをいくつか入れました。FF3.5 +およびSafariでは、num_left_to_loadが0に達し、コールバック関数が起動します。IE8（および場合によってはIE7）では、num_left_to_loadが0に達することはありません。その結果、ページが「Loading...」メッセージでスタックします。

私はプラグインソリューションを探していません。

読んでくれてありがとう。

編集：「読み込み中...」メッセージを削除し、ページを非表示にしなくなりました。IE8では、最初の読み込み後に画像がキャッシュされるため、load（）メソッドが機能していないように見えますが、それでもカウンターは0に到達しません。

編集：window.ready（）を試しましたが、ウィンドウが非常に速く読み込まれます。

編集：最初のロードでIE6-8キャッシュイメージが表示され、アウトバウンドリクエストを行う前にキャッシュをチェックするため、.load（）はそれらに対して一貫して機能しません。

4

1 に答える 1

1

コードをラップする必要があります。$(window).ready(function(){...});これにより、すべての画像が読み込まれるのを待ってから、コードを実行します。

于 2011-08-17T16:30:15.700 に答える