JQuery在显示之前加载div内的所有图像 [英] JQuery Load all images inside div before display

问题描述

我想在实际显示div之前加载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> 
  

起初，我试着做这样的事情：

< pre $ <'code> $（'div img'）。load（function（）{
$ b $（'div img'）。show（）;


}）;

或者：

  $（'div'）。find（'img'）。load（function（）{
 $ b $（'div img'）。show（）; 
 
}）; 
  

不幸的是，这并不奏效，因为一旦浏览器加载了单个图片，事件。有关如何首先加载所有内容的任何想法？感谢！

解决方案

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

  var $ images = $（'div img'），
 preloaded = 0，
 total = $ images.length; 
 $ images.load（function（）{
 if（++ preloaded === total）{
 //完成！
} 
}）; 
  

I want to load every image inside a div before actually displaying them. I have something similar to this:

<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>

At first I tried doing things like:

$('div img').load(function() {

$('div img').show();


});

Or this:

$('div').find('img').load(function() {

$('div img').show();

});

Unfortunately, this didn't work because once the browser loads even just a single image, it fires the event. Any ideas on how to load everything first ? Thanks!

解决方案

You can keep track of how many images have loaded:

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

这篇关于JQuery在显示之前加载div内的所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！