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!
    }
});

Answer 2

不幸的是，以跨浏览器兼容的方式执行此操作并不容易。但幸运的是，有2个插件可以让它变得无痛。

结帐waitforimages和imagesloaded

然后你可以这样做：

$('div').waitForImages(function(){
  $(this).find('img').show();
});

Answer 3

试试这个 http://chipsandtv.com/articles/jquery-image-preload

Answer 4

首先，现代浏览器可以同时执行6 request =＆gt;不要在加载时加载这么多图像。如果您有许多图像，可以在后面的'src =“”'或非设置的“src”属性中设置图像，并在第一次加载图像后设置

其次，您可以使用

检查“图像已加载”

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

您可以查看尺寸最大的图片或DOM中的最后一张图片，以确保其他图片已加载。

希望它会帮助你。

Answer 5

这对我有用：

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

$(window).load(function () {
    $('#div with images').show();
});

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

5 个答案: