Preloader in 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.

This might help: https://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded — palaѕн, Mar 24 '20 at 13:40
Would this do the trick? `$('img').on('load', function() { // do something });` — HomeAlone, Mar 24 '20 at 13:46

score 0 · Accepted Answer · answered Mar 24 '20 at 16:35

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

Preloader in Jquery

1 Answers1