CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
user984621
user984621

Reputation: 48453

How to display loader until images will be displayed?

I have a gallery, the structure of a thumbnail is like this:

<div style="background-image: _URL_FOR_THE_IMAGE;">
  <div class="ajax_loader"></div>
</div>

and JS:

$(window).load(function() {
  $(".ajax_loader").fadeOut("slow");
})

But the problem is that the loader will never disappear.

How to make it work?

Thank you

Upvotes: 0

Views: 63

Answers (1)

Luoruize
Luoruize

Reputation: 688

You can use the Image class like so:

var img = new Image();
img.onload = function() {
    // code to remove loader and display image
}
img.src = IMAGE_URL;

This way you get an event when the images gets loaded, and is saved in the browser's cache.

Upvotes: 1

Related Questions