実際に表示する前に、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つの画像をロードすると、イベントが発生するため、これは機能しませんでした。最初にすべてをロードする方法についてのアイデアはありますか？ありがとう！
ロードされた画像の数を追跡できます。
var $images = $('div img'),
preloaded = 0,
total = $images.length;
$images.load(function() {
if (++preloaded === total) {
// Done!
}
});
残念ながら、クロスブラウザ互換の方法でこれを行う簡単な方法はありません。しかし、幸いなことに、痛みを伴わないプラグインが2つあります。
waitforimagesとimagesloadedをチェックしてください
次に、次のことができます。
$('div').waitForImages(function(){
$(this).find('img').show();
});
まず、最新のブラウザは同時に実行できます6request=>ロード時にそれほど多くの画像をロードしないでください。多くの画像がある場合は、画像を後ろの「src = ""」に設定するか、未設定の「src」属性に設定し、最初の画像を読み込んだ後に設定することができます
次に、「画像が読み込まれました」を使用して確認できます
document.getElementById('#imageId').complete == !0
最大サイズの画像またはDOMの最後の画像をチェックして、他の画像が読み込まれたことを確認できます。
それがあなたを助けることを願っています。
これは私のために働いた：
$(document).ready(function () {
$('#div with images').hide();
});
$(window).load(function () {
$('#div with images').show();
});