javascript - 在所有图像加载无效后执行js

Question

(不重复，因为找不到准确/简单的解决方案)
我试图在所有图像完全加载后执行 JS。我的目标是，当所有图像完全加载完成后，removeClass my-loader 和 addClass visible 到 main-slider 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

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

试过这个 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')
    }
  });
});

有什么简单的解决办法吗？提前致谢。

Answer 1

jQuery 提供了一种为窗口加载事件注册回调的方法，该事件将在加载整个页面(包括图像和 iframe)时触发。 引用:https://learn.jquery.com/using-jquery-core/document-ready/

您的代码应该类似于:

$( 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')
      }
    });
  });
});