Question

我的代码出了什么问题？

我在div中有几个图像，但图像有点大，所以我不希望用户看到它们加载...我希望图像显示在它们全部加载之后。（我使用＆gt; =因为在同一页面上我的徽标也会加载并为加载的图像添加+1。

$(document).ready(function(){
   var loaded = $('img').load().length
   var amount_img = $("#imgcontainer img").length

   $('#imgcontainer').hide()

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

       if (loaded >= amount_img) {
           $('#imgcontainer').delay(300).fadeIn(600)
      }

   });

});

Answer 1

jQuery load（）方法用于绑定事件处理程序以加载事件。

所以，声明

var loaded = $('img').load().length

只会提供＆＃39; img＆＃39;页面中的元素。此外，此语句仅执行一次，并且不跟踪已加载图像的数量。

因此，您可以使用计数器来跟踪加载的图像。

JavaScript的：

$(document).ready(function () {
    // keep a track of number of images loaded
    var loaded = 0;
    var amount_img = $("#imgcontainer img").length;

    $('#imgcontainer').hide();

    $('#imgcontainer img').load(function () {
        // This function will be called every time an image is loaded inside imgcontainer

        // increment the counter for images loaded
        loaded++;
        if (loaded >= amount_img)
            $('#imgcontainer').delay(300).fadeIn(600);
    });

});

加载所有图像时jquery淡入

1 个答案: