加载所有图像后执行js [英] Execute js after all image loaded

问题描述

（我搜索了，但找不到完全/简单的解决方案）

我想在所有图像完全加载后执行JS。我的目标是，当所有图像完全加载完毕后，将removeClass my-loader 和addClass 可见改为主滑块 div。

(I searched, but not find exactly/easy solution)
I'm trying to execute JS after all images completely loaded. My goal is, when all images finish load completely, then removeClass my-loader and addClass visible to 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"); 

尝试：

但不行，问题是在完成图像加载之前执行：

Tried :
But not work, problem is it execute before complete image load:

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"); 
}); 

简单解决方案的任何想法？

Any ideia for simple solution?

推荐答案

您可以使用 load（）来检查图像是否已加载！

You can use load() to check if the images are loaded!

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

有时，当浏览器缓存图像时，这可能无效。请查看 与图像一起使用时加载事件的注意事项

This may not work sometimes when the images are cached by the browser. Please check 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>

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

But, this answer is a working case.

这篇关于加载所有图像后执行js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！