djfenom
asked on
Image swap onclick
I am using a javascript swap image onclick script, I have small thumbnails and when clicked they change a larger image on the page. The larger image is contained in a div and I have assigned a loading graphic as the background image of this div, so when the initial image is loading the user sees a loading graphic. However when the page is loaded and a thumbnail is clicked, the new image just replaces the original image and the loading graphic is never seen, which is where my problem lies. I need this loading graphic to appear each time a thumbnail is clicked, so that user knows they are waiting for the image to load.
Here is my current code:
<script type="text/javascript">
function imgChange( img )
{
document.bigpic.src = img
}
</script>
<div id="mainbody">
<div id="textcol">
<h2><a href="corporate-wear.asp" title="Back to Corporate Wear">Corporate Wear</a> : <a href="corporate-ladies.asp
<div class="textholder" id="fullheight">
<p>Ut enim ad minim veniam, ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur.</p>
</div>
<div id="thumbs">
<p id="enlarge">Click to enlarge</p>
<p><a href="images/ladies-jacket
</div>
</div>
This is the div with the background loading image:
<div id="imgcol"><img src="images/ladies-jacket-
Here is my current code:
<script type="text/javascript">
function imgChange( img )
{
document.bigpic.src = img
}
</script>
<div id="mainbody">
<div id="textcol">
<h2><a href="corporate-wear.asp" title="Back to Corporate Wear">Corporate Wear</a> : <a href="corporate-ladies.asp
<div class="textholder" id="fullheight">
<p>Ut enim ad minim veniam, ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation eu fugiat nulla pariatur.</p>
</div>
<div id="thumbs">
<p id="enlarge">Click to enlarge</p>
<p><a href="images/ladies-jacket
</div>
</div>
This is the div with the background loading image:
<div id="imgcol"><img src="images/ladies-jacket-
ASKER
I'm not sure I understand, the imgcol div already has a background image called "loading.gif", this is seen only when the page loads the first time, when a thumbnail is clicked the image in the div is just replaced, it doesn't disappear first exposing the loading.gif background, so the user just gets a pause before the new image is loaded.
On click: Why not show the loading graphic. Then use the setTimout to delay showing the new image.
ASKER
Ok, how would I go about that and is it cross-browser compatible?
<script type="text/javascript">
function imgChange2(img){document.b
function imgChange( img ) {
document.bigpic.src = "loading_image.jpg";
setTimeout("imgChange2(img
}
</script>
Replace 'loading_image.jpg" with path to your background image.
setTimeout is a standard Javascript unction & as far as I knew it's cross-browser compatible:
http://www.w3schools.com/htmldom/met_win_settimeout.asp HTML DOM setTimeout() Method
function imgChange2(img){document.b
function imgChange( img ) {
document.bigpic.src = "loading_image.jpg";
setTimeout("imgChange2(img
}
</script>
Replace 'loading_image.jpg" with path to your background image.
setTimeout is a standard Javascript unction & as far as I knew it's cross-browser compatible:
http://www.w3schools.com/htmldom/met_win_settimeout.asp HTML DOM setTimeout() Method
ASKER
Thanks for that, but I'm now getting 'img' is undefined? It changes to the loading graphic, then pauses for a few seconds, then gives the error?
Oops. Try this:
setTimeout("ImgChange2("+i
setTimeout("ImgChange2("+i
ASKER
Now I'm getting 'images' is undefined? The only place it mentions this is onclick="imgChange('images
setTimeout("imgChange2('"+
Ok now I decided to test it before posting code :O
That wont give you errors, but for some reason the other image is NOT being displayed after the timeout. Gimme bit more time.
Ok now I decided to test it before posting code :O
That wont give you errors, but for some reason the other image is NOT being displayed after the timeout. Gimme bit more time.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Excellent, thanks very much!
Welcome.
Here's a more flexible version: You can call it with or without the timeout parameter; without, then it uses default value.
function imgChange(img,timeout) {
if(timeout==undefined) timeout=500;
document.bigpic.src = "3428.jpg"
setTimeout('imgChange2("'+
}
Usability note: unnecessary waits can be annoying on a web site. The faster your reader can view the page, the more they may like it. If a high speed Internet connection can let people see a bigger picture instantly instead of waiting a second or two, then why force a wait? Unless it's for artistic or similar purposes, but even then there may be better ways to doing what you want to do without the waits.
One alternative:
A "Loading..." banner below the bigpic div, displayed for a second or few. This way the image loads as fast as it can while giving the reader a cue that it's loading -- and you make a happy reader from the display speed.
Here's a more flexible version: You can call it with or without the timeout parameter; without, then it uses default value.
function imgChange(img,timeout) {
if(timeout==undefined) timeout=500;
document.bigpic.src = "3428.jpg"
setTimeout('imgChange2("'+
}
Usability note: unnecessary waits can be annoying on a web site. The faster your reader can view the page, the more they may like it. If a high speed Internet connection can let people see a bigger picture instantly instead of waiting a second or two, then why force a wait? Unless it's for artistic or similar purposes, but even then there may be better ways to doing what you want to do without the waits.
One alternative:
A "Loading..." banner below the bigpic div, displayed for a second or few. This way the image loads as fast as it can while giving the reader a cue that it's loading -- and you make a happy reader from the display speed.
ASKER
Thanks again, the larger images are between 35-50k, so there's not gonna be a massive wait anyway, even on dial up.
Problem with this method is: if the image loads in 1/4 second, and you make the user wait 2 seconds, that's an unneeded wait.
There may be a way to find out when the image has finished loading. And theres also a "preload" feature....
There may be a way to find out when the image has finished loading. And theres also a "preload" feature....
if, when the user first views the page, the div already contains an image (the default image), why not simply apply the loading graphic as a background image to the "imgcol" div? this way, it'll always be present, but will only be seen when the div doesn't contain an image (when the image is loading for example).