Link to home
Start Free TrialLog in
Avatar of CodedK
CodedKFlag for Greece

asked on

Clicking a small image loads big image in a div.

Hi.

I use some code to click a small image and load a big image to a div.
The problem is that the user doent know that this might take some time, so i need to show
a loading gif inside the big div until the big one load completely.
How can i do this ?
Thanks in advance :)

This is my code :
$(".x img").click(function() {
        var src = $(this).attr("src");
        src = src.replace('/thumbs','');
        $(".project_wrapper img").attr("src", src);
    });

Open in new window

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Does look like it would be what was needed !
Avatar of CodedK

ASKER

Suddenly i feel like i should explain myself better, since two old members of this community
point me to my own question! Which is entirely different!

The one was for the whole page. For that case i could use the onload event.
Correct me if i'm wrong but as you can see (in the example code above) this is entirely different.
I change the source using jquery. There is no event here?!!! Right ?

I need an event to let me know when the image loading is completed.
Please read carefully.
I appreciate your time and all but i think i'm alone whenever i post a question here.
Of course there is an event
the CLICK is an event
So you can reuse either of the methods I posted
Avatar of CodedK

ASKER

You mean something like this ?   :

    $(".x img").click(function() {
        var src = $(this).attr("src");
        src = src.replace('/thumbs','');
       
        $('#wait').fadeOut('slow',function(){
          $(".project_wrapper img").attr("src", src);alert('wait');
          $('.project_wrapper').fadeIn('slow');
        });
        ....
        ....
    });
SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CodedK

ASKER

I tried this :

        $(".project_wrapper img").attr("src", src);

        $(".project_wrapper img").onload=function() {
          alert('inside event');
         $('div.loader').fadeOut('slow',function(){
         $('.project_wrapper').fadeIn('slow');
          })
        };

But nothing happens. No alert shows. It doesn't go in the onload.

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

But if i use it like this :

        var track_pos = $("div.project_wrapper img").position();
        var track_w = $("div.project_wrapper img").width();
        var track_h = $("div.project_wrapper img").height();
        $('div.loader').css({ 'visibility': "vidible",'opacity': '1'});
        $('div.loader').css({ 'top' : track_pos.top, 'width': track_w, 'height': track_h, 'left': track_pos.left, 'z-index': 50 });
        alert('who');

        $('div.loader').fadeOut('slow',function(){
          $(".project_wrapper img").attr("src", src);
          $('div.project_wrapper').fadeIn('slow');
        });


It works only for the first time ! It doesn't appear again !
Can you swap the top functions so you do the onload code BEFORE you change the src
Avatar of CodedK

ASKER

No nothing happens.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial