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

Answer 2

以下是如何使用Deferreds和本机处理程序执行此操作，如果图像缓存在较旧的浏览器等中，则调用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')
});

加载所有图像后，执行js不起作用

2 个答案: