4

実際に表示する前に、div内のすべての画像をロードしたいと思います。私はこれに似たものを持っています:

<div>

<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />

</div>

最初、私は次のようなことを試みました:

$('div img').load(function() {

$('div img').show();


});

またはこれ:

$('div').find('img').load(function() {

$('div img').show();

});

残念ながら、ブラウザが1つの画像をロードすると、イベントが発生するため、これは機能しませんでした。最初にすべてをロードする方法についてのアイデアはありますか?ありがとう!

4

5 に答える 5

7

ロードされた画像の数を追跡できます。

var $images = $('div img'),
    preloaded = 0,
    total = $images.length;
$images.load(function() {
    if (++preloaded === total) {
        // Done!
    }
});
于 2012-10-10T01:58:43.363 に答える
1

残念ながら、クロスブラウザ互換の方法でこれを行う簡単な方法はありません。しかし、幸いなことに、痛みを伴わないプラグインが2つあります。

waitforimagesimagesloadedをチェックしてください

次に、次のことができます。

$('div').waitForImages(function(){
  $(this).find('img').show();
});
于 2012-10-10T01:57:14.517 に答える
0

これを試して くださいhttp://chipsandtv.com/articles/jquery-image-preload

于 2012-10-10T01:57:00.677 に答える
0

まず、最新のブラウザは同時に実行できます6request=>ロード時にそれほど多くの画像をロードしないでください。多くの画像がある場合は、画像を後ろの「src = ""」に設定するか、未設定の「src」属性に設定し、最初の画像を読み込んだ後に設定することができます

次に、「画像が読み込まれました」を使用して確認できます

 document.getElementById('#imageId').complete == !0

最大サイズの画像またはDOMの最後の画像をチェックして、他の画像が読み込まれたことを確認できます。

それがあなたを助けることを願っています。

于 2014-01-20T14:40:31.293 に答える
0

これは私のために働いた:

$(document).ready(function () {
    $('#div with images').hide();
});

$(window).load(function () {
    $('#div with images').show();
});
于 2014-06-16T23:44:16.183 に答える