Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 484
  • Last Modified:

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" title="Back to Ladies Wear">Ladies Wear</a> : Jackets </h2>
      <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-image2.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb2.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image2.jpg'); return false" /></a><a href="images/ladies-jacket-image3.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb3.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image3.jpg'); return false" /></a><a href="images/ladies-jacket-image4.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb4.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image4.jpg'); return false" /></a><a href="images/ladies-jacket-image1.jpg" title="Click to view larger image"><img src="images/ladies-jacket-thumb1.jpg" alt="Ladies Jacket Thumb" width="78" height="77" border="0" onclick="imgChange('images/ladies-jacket-image1.jpg'); return false" /></a></p>
      </div>
    </div>

This is the div with the background loading image:

    <div id="imgcol"><img src="images/ladies-jacket-image1.jpg" alt="Ladies Jacket Image" name="bigpic" width="367" height="386" id="bigpic" /></div>
0
djfenom
Asked:
djfenom
  • 7
  • 6
1 Solution
 
geordie007Commented:

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).
0
 
djfenomAuthor Commented:
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.
0
 
callrsCommented:
On click: Why not show the loading graphic. Then use the setTimout to delay showing the new image.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
djfenomAuthor Commented:
Ok, how would I go about that and is it cross-browser compatible?
0
 
callrsCommented:
<script type="text/javascript">
function imgChange2(img){document.bigpic.src = img;}

function imgChange( img ) {
      document.bigpic.src = "loading_image.jpg";
      setTimeout("imgChange2(img)",1000);
}
</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
0
 
djfenomAuthor Commented:
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?
0
 
callrsCommented:
Oops. Try this:
setTimeout("ImgChange2("+img+")",1000);
0
 
djfenomAuthor Commented:
Now I'm getting 'images' is undefined? The only place it mentions this is onclick="imgChange('images/ladies-jacket-image2.jpg'); ???
0
 
callrsCommented:
setTimeout("imgChange2('"+img+"')",2000)
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.
0
 
callrsCommented:
function imgChange2(img){document.bigpic.src=img;return true;}

function imgChange(img,timeout) {
      document.bigpic.src = "3428.jpg"
      setTimeout('imgChange2("'+img+'")',timeout);
      }

I've added a "timeout" parameter, in case you want to vary the time from where you call the function.
But remove it if you don't need it & just set the timeout to any # of milliseconds in setTimeout
0
 
djfenomAuthor Commented:
Excellent, thanks very much!
0
 
callrsCommented:
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("'+img+'")',timeout);
      }

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.
0
 
djfenomAuthor Commented:
Thanks again, the larger images are between 35-50k, so there's not gonna be a massive wait anyway, even on dial up.
0
 
callrsCommented:
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....
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now