javascript - 所有图片加载完毕后执行js

Question

(我搜索过，但没有找到准确/简单的解决方案)
我正在尝试在所有图像完全加载后执行 JS。我的目标是，当所有图像完全加载完成后，然后removeClass my-loader并将Class visible添加到main-slider div。

HTML:

<div class='main-slider my-loader'>
<img src="/nice-girl.jpg">
<img src="/nice-car.jpg">
<img src="/nice-boy.jpg">
</div>

当所有图片加载完成后执行下面的js

$(".main-slider").removeClass("my-loader").addClass("visible"); 

尝试过:
但不起作用，问题是它在完成图像加载之前执行:

var imagesPre = new Array;
var success = new Array;

$('.big-slides img').each(function(){
  imagesPre.push(this.src);
});

for (i = 0; i < imagesPre.length; i++) {
    (function(path, success) {
        image = new Image();
        image.onload = function() {
          success.resolve();
        };
        image.src = path;
    })(imagesPre[i], success[i] = $.Deferred());
}

$.when.apply($, success).done(function() {
$(".main-slider").removeClass("my-loader").addClass("visible"); 
}); 

有什么简单的解决方案吗？

Answer 1

您可以使用load()来检查图像是否加载!

$('.imgTag').each(function(){
  $(this).load(function(){
   $(".main-slider").removeClass("my-loader").addClass("visible"); 
  })
})

当图像被浏览器缓存时，这有时可能不起作用。请查看Caveats of the load event when used with images

var img = $('img')
var count = 0
img.each(function(){
  $(this).load(function(){
    count = count + 1
    if(count === img.length) {
      $('.main-slider').removeClass('my-loader').addClass('visible')
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main-slider my-loader'>
<img src="https://unsplash.it/200/300/?random">
<img src="https://unsplash.it/200/300/?random">
<img src="https://unsplash.it/200/300/?random">
</div>

但是，这个答案是一个可行的案例。