在所有图像加载失败后执行js

Question

(not duplicate, because 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="https://unsplash.it/200/300/">
<img src="https://unsplash.it/200/300/">
<img src="https://unsplash.it/200/300/">
</div>

Execute below js when all images completely loaded

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

Tried this js :
But not works properly on my site, problem is when i clear browser cache, then it works/execute! when i reload page then next time it's not works/execute!
It only works when i clear browser cache.

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

Any simple solution? Thanks in advance.

Answer 1

jQuery provides a way to register a callback for the window load event which will fire when the entire page, including images and iframes, are loaded. Reference: https://learn.jquery.com/using-jquery-core/document-ready/

Your code should look something like:

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

Here's how to do this, using Deferreds and native handlers, and calling the onload handler if the image is cached in older browsers etc.

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