javascript - 1 div中所有图像的加载函数

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 添加到监听器即可。

并且不透明度的最大值为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.