Jquery中的预加载器

Question

I've coded a fancy preloader with jQuery for my project. While my AJAX query is processed it is activated.

I have used to load it:

$(document).ajaxStart(function) () {
    #preloder is displayed 
} 

And to stop it:

$(document).ajaxStart(function) () {
    #preloder is turned off 
} 

Problem is my AJAX returns images src that are then diplayed in a <div> but some of the pictures are really heavy and most of the time my preloader stops before my pictures are completely loaded.

I went through jquery documentation and found a .load(function). But it seems that it has been removed from jQuery. It seems that it has been replaced by .trigger("load") . Can it be useful for my problem? I tried to implement it but with no sucess.

Answer 1

Quick answer from @Aureliano Far Suau that worked beautifully for me. No plugin needed:

$('img').on('load', function() {
          // do something
    });

For multiple images:

var loaded = 0;
$('img').on('load', function() {
   loaded++;
   if(loaded == $('img').length){
      // do something
   }
});