CodedK
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 :
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);
});
Does look like it would be what was needed !
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.
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
the CLICK is an event
So you can reuse either of the methods I posted
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').fade In('slow') ;
});
....
....
});
$(".x img").click(function() {
var src = $(this).attr("src");
src = src.replace('/thumbs','');
$('#wait').fadeOut('slow',
$(".project_wrapper img").attr("src", src);alert('wait');
$('.project_wrapper').fade
});
....
....
});
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I tried this :
$(".project_wrapper img").attr("src", src);
$(".project_wrapper img").onload=function() {
alert('inside event');
$('div.loader').fadeOut('s low',funct ion(){
$('.project_wrapper').fade In('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('s low',funct ion(){
$(".project_wrapper img").attr("src", src);
$('div.project_wrapper').f adeIn('slo w');
});
It works only for the first time ! It doesn't appear again !
$(".project_wrapper img").attr("src", src);
$(".project_wrapper img").onload=function() {
alert('inside event');
$('div.loader').fadeOut('s
$('.project_wrapper').fade
})
};
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('s
$(".project_wrapper img").attr("src", src);
$('div.project_wrapper').f
});
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
ASKER
No nothing happens.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
https://www.experts-exchange.com/questions/24934778/Show-a-loading-message-and-display-black-background-till-the-page-loads.html