Take the 2-minute tour ×

Edit: Here is the new code:

        $("#normalcontent").hide("fast").load($this.attr("href") +" #normalcontent","",function(){
                var myThis=$(this);
                var img = new Image();
                $(img).attr("src", "images/ajax-loader.gif");


Let's say I have a link in "index.php", when I click on that link, it loads, via ajax, a content from a page "content.php" into a div element in "index.php", that has an id of "#content". That content in "content.php" has large images. I want to display an image loader, say "ajax-loader.gif", instead of those large images, until the images are downloaded by client.

( I know how to have an image loader .gif for the images on "index.php". )

How can I achieve this?

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted
$('#blah').load('/index.php #content', function () {
    $(this).find('img').each(function () {
        var self = $(this),
            replacee = $('<img src="/ajax-loader.gif/>');

        this.onload = function () {


I'd be careful about your layout though... I doubt swopping large images for small loaders is ideal. As a user, I'd prefer to delay the showing of the whole content, until all images have loaded.

share|improve this answer
hmm, but what if the situation is an image gallery? changing only the src attribute,instead of changing whole <img ... />, would do right? –  abdullah kahraman Jun 8 '10 at 8:45
@abdullah: Yes, but you'll still have to create a new image, and set it's src to the src of the gallery image, and detect onload, so the gallery image continues to load. You should also be wary of any height/width attributes that would mess up the ajax-loader. –  Matt Jun 8 '10 at 9:07
Will it be OK, if I hide the large image, add my loader gif after it, and when the large image finishes loading, show it, and remove loader gif? –  abdullah kahraman Jun 8 '10 at 19:44
@abdullah: Yes. –  Matt Jun 8 '10 at 20:21
add comment

Your Answer


