在显示之前加载div内的所有图像的JQuery方法

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();

});

不幸的是，这种方法行不通，因为一旦浏览器加载了任何一个图片，它就会触发事件。有没有什么好的方法可以先加载所有内容呢？谢谢！

- AJ Naidas

---

如果您像这样设置尺寸：<img width="100" height="100" src="1.jpg" />问题解决了。在PHP中，您可以使用http://php.net/manual/en/function.getimagesize.php获取尺寸。 - Alqin

Answer 1

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

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

- nathan

---

我认为如果IE8缓存图像，这将失败。 - Fresheyeball

哦，这是一个很好的观点。我会把它留在这里，以防其他人犯同样的错误。 - nathan

Answer 2

很遗憾，在跨浏览器兼容的情况下，没有简单的方法来实现这一点。但幸运的是，有两个插件可以让它变得轻松。

请查看waitforimages和imagesloaded

然后你可以这样做：

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

- Fresheyeball

Answer 3

首先，现代浏览器可以同时执行6个请求 => 不要在加载时加载太多图像。如果您有很多图像，可以将图像设置在后面的 'src =""' 或不设置 "src" 属性，并在第一张图像加载后设置。

其次，您可以使用“检查图像是否已加载”来检查。

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

您可以检查具有最大尺寸的图像或DOM中的最后一个图像，以确保其他图像已加载。

希望这能帮到您。

- LogPi

Answer 4

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

- Tariqulazam

Answer 5

这对我有用：

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

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

- Reft

---

正确，但不是针对 div，而是针对页面中的所有图片。 - user3304007