javascript - JQuery 在显示前加载 div 中的所有图像

Question

我想在实际显示它们之前将每个图像加载到一个 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();

});

不幸的是，这没有用，因为一旦浏览器加载了一张图片，它就会触发该事件。关于如何首先加载所有内容的任何想法？谢谢!

Answer 1

您可以跟踪已加载的图像数量:

var $images = $('div img'),
    preloaded = 0,
    total = $images.length;
$images.load(function() {
    if (++preloaded === total) {
        // Done!
    }
});