Question

（我搜索过，但找不到完全/简单的解决方案）
在完全加载所有图像后，我试图执行JS。我的目标是，当所有图片完全加载完成后，将removeClass my-loader和addClass 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

＆＃13;

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')
    }
  })
})

＆＃13;

<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>

＆＃13;

但是，这个答案是一个工作案例。

Answer 2

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

jquery codes:
`
window.loadCount = 0;
$('.imgTag').onload(function(){
    window.loadCount++;
    if(window.loadCount == $('.imgTag').length){
        $('.imgTag').show();
    }
});
`

加载所有图像后执行js

2 个答案: