How to display a loading image when loading the actual image

Question

Sometimes images take some time to render in the browser. I want to show the downloaded image while the actual image is loading, and when the image is loaded, the downloaded image is deleted and the actual image is displayed. How can I do this using jQuery or any javascript?

Answer 1

You can do something like this:

// show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); 

You are assigning a load event to an image that fires when the image has finished loading. Before that, you can show the image of your bootloader.

Answer 2

Just add a background image for all images using css:

 img { background: url('loading.gif') no-repeat; } 

Answer 3

I use a similar technique to publish @Sarfraz, but instead of hiding the elements, I just manipulate the upload image class.

 <style type="text/css"> .loading { background-image: url(loading.gif); } .loaderror { background-image: url(loaderror.gif); } </style> ... <img id="image" class="loading" /> ... <script type="text/javascript"> var img = new Image(); img.onload = function() { i = document.getElementById('image'); i.removeAttribute('class'); i.src = img.src; }; img.onerror = function() { document.getElementById('image').setAttribute('class', 'loaderror'); }; img.src = 'http://path/to/image.png'; </script> 

In my case, sometimes the images do not load, so I am handling the onerror event to change the class of the image so that it displays the background image of the error (and not the icon of the broken browser image).

Answer 4

Instead of just doing this cited method from https://stackoverflow.com/a/167188/

You can do something like this:

 // show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); 

You assign a load event to the image, which fires when the image has a finished load. Before that, you can show the image of your bootloader.

you can use another jQuery function to remove the loading image and then be hidden:

 // Show the loading image. $('#loader_img').show(); // When main image loads: $('#main_img').on('load', function(){ // Fade out and hide the loading image. $('#loader_img').fadeOut(100); // Time in milliseconds. }); 

"Once the opacity reaches 0, the display style property will be none." http://api.jquery.com/fadeOut/

Or you could not use the jQuery library because there are already simple JavaScript cross browser methods.

Answer 5

Use a javascript constructor with a callback that runs when the image finishes loading in the background. Just used it and works great for me in a cross browser. Here's the flow with the answer .