0

Edit: Here is the new code:

        $("#normalcontent").hide("fast").load($this.attr("href") +" #normalcontent","",function(){
        $(this).slideDown("normal");
        $(this).find("img").each(function(){
            if($(this).hasClass("large"))
            {
                var myThis=$(this);
                myThis.css("display","none");
                var img = new Image();
                $(img).attr("src", "images/ajax-loader.gif");
                $(img).css({
                    border:"none",
                    width:"16px",
                    height:"11px"
                });
                myThis.after(img);
                myThis.load(function(){
                    $(img).remove();
                    myThis.fadeIn("normal");
                })
                .error(function(){
                    $(img).attr("src","images/errorIcon.png").css({
                        border:"none",
                        width:"14px",
                        height:"14px"
                    });
                });
            }
        });
    });

Hello.

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?

abdullah kahraman
  • 503
  • 4
  • 23

1 Answers1

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

        this.onload = function () {
            replacee.replaceWith(self);
        };

        self.replaceWith(replacee);
    });
});

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.

Matt
  • 74,352
  • 26
  • 153
  • 180
  • hmm, but what if the situation is an image gallery? changing only the src attribute,instead of changing whole , would do right? – abdullah kahraman Jun 08 '10 at 08: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 08 '10 at 09: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 08 '10 at 19:44