Question

我正在显示加载图片并在加载图片时隐藏它。

$('.image1').on('load', function(){
    $('.image1').css("opacity","100");
    $('#loaderimg').hide();
});

但是，我想为包含一些图像的指定div创建此函数。因此，应该显示加载程序图像，直到div中的所有图像都被加载。

<div id="container">
  <img class="image1" src="land1.jpg" \>
  <img class="image2" src="land2.jpg" \>
  <img class="image3" src="land3.jpg" \>
  <img class="image4" src="land4.jpg" \>
</div>

唯一的是，div中最多有4个图像，但有时它可以是1,2,3或4个图像。但是类名永远不会改变。

制作它的正确方法是什么？

Answer 1

您可以跟踪所有图像的加载，并且只在加载所有图像时隐藏和显示。也许是这样的。

但还有一件事。会发生什么情况是图像不可用或有错误？你也应该跟踪这个。只需将error添加到侦听器即可。

opacity最多可以1，而不是100。您可以将其作为float或number而不是string传递。

var images = $("#container img");
var amount = images.length;
var loaded = 0;

images.on("load error", function() {
    ++loaded;

    if( loaded == amount ) {
        images.css("opacity", 1);
        $('#loaderimg').hide();
    }
});

<强> Working example.

1 div中所有图像的加载功能

1 个答案: