I have a simple question but I couldn't find a clean answer. I need to load heavy images after an ajax call and I want to use an animated gif as a pre-loader. I'm using the follow code:

function loadProducts(url) {
    $("#loading").show();
    $('#inner').fadeOut(1).load(url + ' .product-list', function() {
        $('#inner').fadeIn(1000, function() {
            $("#loading").hide();
        });
    });
}

The #loading is hiding when the HTML is loaded .load(url + ' .product-list'. The problem is that the heavy images are still rendering on the screen and I would like to keep showing the animated .gif until the renders of the images are finished. Is there a way to know when the images on the screen are rendered?. Thanks in advance.

I have a simple question but I couldn't find a clean answer. I need to load heavy images after an ajax call and I want to use an animated gif as a pre-loader. I'm using the follow code:

function loadProducts(url) {
    $("#loading").show();
    $('#inner').fadeOut(1).load(url + ' .product-list', function() {
        $('#inner').fadeIn(1000, function() {
            $("#loading").hide();
        });
    });
}

The #loading is hiding when the HTML is loaded .load(url + ' .product-list'. The problem is that the heavy images are still rendering on the screen and I would like to keep showing the animated .gif until the renders of the images are finished. Is there a way to know when the images on the screen are rendered?. Thanks in advance.

• javascript
• jquery
• ajax

• where is ajax? you use ajax first in your code – Pratik Joshi Commented Mar 31, 2014 at 5:23
• 1 add an event for each image onload, count the events and when all have called the call back, Then remove the #loading – exussum Commented Mar 31, 2014 at 7:08

6 Answers 6

You can use promises to check when all the images have loaded, and then remove the loading gif.

This creates a promise that is resolved when the image has loaded, all the promises are kept in an array, and when all promises are resolved, i.e. all images are loaded, the callback fires.

function loadProducts(url) {
    $("#loading").show();

    $('#inner').fadeOut(1).load(url + ' .product-list', function() {

        var promises = [];

        $('#inner').find('img').each(function(_, image) {
            var img = new Image(), 
                def = new $.Deferred();

            img.onload = function() {
                def.resolve();
            }

            promises.push( def.promise() );

            img.src = image.src;
            if (img.plete) img.onload();
        });

        $.when.apply(undefined, promises).done(function() {

            $('#inner').fadeIn(1000, function() {
                $("#loading").hide();
            });

        });
    });
}

You can use ImagesLoaded

Sample usage

imagesLoaded( document.querySelector('#container'), function( instance ) {
  console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});

Could add/remove the loader as a class? I have base 64encoded the loader, so there is no pre loader required. This also uses a closure to allow the counter to remember its value.

var imgDiv = document.getElementById("imgDiv");
imgDiv.onclick = (function () {
    "use strict";
    var count = 0;     // init the count to 0
    return function () {
        count++;       //count
        if (count === 1) {    // do something on first click
            $('.img-loader-content').addClass('loader');
            $('.imgDiv').load("images/img.jpg", function () {
                $('.img-loader-content').removeClass('loader');
            });
        }
        if (count > 1) {
            $('.imgDiv').slideToggle(400);
        }
    };
})
();

You may try using Image object. E.g:

function loadImage(url) {
  $("#loading").show();
  var img = new Image();
  img.src = url;
  img.onload = function(e) {
      $("#loading").hide();
      //ur code to append/show the image
  };
}

the most approach to this is using onLoad , so basically after the success call of ajax , invoke another call into success function :

http://www.w3schools./jsref/event_onload.asp

onload is most often used within the element to execute a script once a web page has pletely loaded all content (including images, script files, CSS files, etc.).

or use native solution like this :

<img src="w3javascript.gif" onload="loadImage()">

http://www.w3schools./jsref/event_img_onload.asp

Also last answer of this question is very useful in your case :

Is there something similar to `$(window).load();` for executing a function after newly inserted Ajax content has finished loading?

You can do it easily by ajaxComplete callback, here check an example http://www.w3schools./jquery/tryit.asp?filename=tryjquery_ajax_ajaxplete