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插件，还有很多其他技巧可以完成这项工作。 You can check it out here。然后检查所有图像负载，你只需要这样做

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

加载所有图像时的jquery div

3 个答案: