jquery - 加载所有图像时的jquery div

Question

我可以在加载图像时加载图像，方法是：

<img style="display:none;" src="big3.jpg">
<script type="text/javascript">
    $('img').load(function(){
        $(this).css({'display':'block'})
    });
</script>

但是我想要的是在加载所有img时加载div，但这不起作用，为什么？：

<div style="display:none;">
    <img src="big3.jpg">
</div>
<script type="text/javascript">
    $('div').load(function(){
        $(this).css({'display':'block'})
    });
</script>

Answer 1

正如@Kolink 所说，div 不会加载。当 div 中的所有图像都已加载时，此代码将显示 div。（未经测试）

var $images = $('div img');
var loaded_images_count = 0;

$images.load(function(){
    loaded_images_count++;

    if (loaded_images_count == $images.length) {
        $("div").show();
    }
});

Answer 2

<div>元素不加载，图像加载。您想监听图像何时加载，然后获取<div>并显示它。

Answer 3

我知道回答这个问题为时已晚，但对于任何查看此线程的人来说，有一个简单易用的 jQuery 插件以及许多其他技巧来完成这项工作。你可以在这里查看。然后检查所有图像加载，你只需要这样做

$('#container').imagesLoaded()
  .always( function( instance ) {
    console.log('all images loaded');
  })