[jQuery] Image loading

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

[jQuery] Image loading

Post by Wolfie »

Hi all,


I have this code in jquery which loads the image from php file :

Code: Select all

 $('a[href="aktualnosci.php"]').click(function(){        $('#foto').load('gallery.php', {'dir':"glowna",                                    'kategory':"glowna",                                    'gallery':'no'}, function() {                           //$(this).hide().fadeIn(100);                 });}); 
But the problem is that when I click the anchor first time, than the foto is loading from the top to bottom just like in the ordinary html page, and I want to hide the process of loading image from the user and show the image when the foto will load, can u tell me how can I achive it in jquery ?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: [jQuery] Image loading

Post by kaszu »

Each image has onload event which is fired, when image finishes loading.

Code: Select all

$('#foto img').each(function () {
    //Make sure image is not loaded already
    if (!this.complete) {
        //Hide image from user
        $(this).hide();
 
        //image has onload event, not jQuery object
        //Maybe $(this).bind('load', ...) will also work, haven't tried myself.
        this.onload = function () {
            $(this).show();  //Show it
        };
    }
});
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] Image loading

Post by Wolfie »

But this should be as a callback of $('#foto').load() function ?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: [jQuery] Image loading

Post by kaszu »

Yes, it was intended as a callback, insert after //$(this).hide().fadeIn(100);
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] Image loading

Post by Wolfie »

Well the code seems to work well, but I cannot test it well because I have the page on my localhost and the images are loading quite fast, but I will check it on external as well , but now I have another question

Cause I was trying to fadeIn after load and I did it like this :

Code: Select all

 this.onload = function () {                $(this).hide().fadeIn(5000);  //Show it            }; 
But it doesn't work, cause the photo is not fadeing in but show of immediately.....
Post Reply