Javascript 在所有加载的图像不工作后执行js

（不重复，因为找不到精确/简单的解决方案）
我试图在所有图像完全加载后执行JS。我的目标是，当所有图像完全完成加载后，移除类

My loader

，并将类

visible

添加到

主滑块

div

HTML:

<div class='main-slider my-loader'>
<img src="https://unsplash.it/200/300/">
<img src="https://unsplash.it/200/300/">
<img src="https://unsplash.it/200/300/">
</div>

尝试了这个js：
但在我的站点上不能正常工作，问题是当我清除浏览器缓存时，它就会工作/执行！当我重新加载页面时，下次它不工作/执行
仅当我清除浏览器缓存时，它才起作用

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

---

有简单的解决办法吗？提前感谢。

jQuery提供了一种为窗口加载事件注册回调的方法，该事件将在加载整个页面（包括图像和iFrame）时触发。 参考：

您的代码应该如下所示：

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

---

下面介绍如何做到这一点，使用延迟和本机处理程序，如果图像缓存在较旧的浏览器中，则调用

onload

处理程序等

var img  = $('.main-slider img');
var defs = img.map(function(){
    var def = new Deferred();

    this.onload  = def.resolve;
    this.onerror = def.reject;
    if (this.complete) this.onload();

    return def.promise();
});

$.when.apply($, defs).then(function() {
    $('.main-slider').removeClass('my-loader').addClass('visible')
});

---

可能重复为什么不仅仅是

$（窗口）。在（'load'

而不是起作用时，尝试了…“？random”必须是一个真正的随机数…这样就永远不要使用缓存浏览器。图像链接已更新。是正确的，但此时不再需要检查图像是否已加载，只需在事件中删除该类即可“window.load”。这与缓存无关，因此您在做其他错误的事情。

var img  = $('.main-slider img');
var defs = img.map(function(){
    var def = new Deferred();

    this.onload  = def.resolve;
    this.onerror = def.reject;
    if (this.complete) this.onload();

    return def.promise();
});

$.when.apply($, defs).then(function() {
    $('.main-slider').removeClass('my-loader').addClass('visible')
});