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

我想在实际显示它们之前加载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请求=>不要在加载时加载这么多图像。 如果你有很多图像，你可以在后面的’src =“”’或非设置的“src”属性设置图像，并在第一次加载图像后设置

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

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

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

希望它会帮助你。

Answer 5

这对我有用：

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