Solved

Image swap onclick

Posted on 2006-06-16
14
474 Views
Last Modified: 2008-01-16
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
Comment
Question by:djfenom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
14 Comments
 
LVL 7

Expert Comment

by:geordie007
ID: 16918857

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
 

Author Comment

by:djfenom
ID: 16918898
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
 
LVL 30

Expert Comment

by:callrs
ID: 16918923
On click: Why not show the loading graphic. Then use the setTimout to delay showing the new image.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:djfenom
ID: 16918962
Ok, how would I go about that and is it cross-browser compatible?
0
 
LVL 30

Expert Comment

by:callrs
ID: 16919161
<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
 

Author Comment

by:djfenom
ID: 16919486
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
 
LVL 30

Expert Comment

by:callrs
ID: 16919498
Oops. Try this:
setTimeout("ImgChange2("+img+")",1000);
0
 

Author Comment

by:djfenom
ID: 16919523
Now I'm getting 'images' is undefined? The only place it mentions this is onclick="imgChange('images/ladies-jacket-image2.jpg'); ???
0
 
LVL 30

Expert Comment

by:callrs
ID: 16919663
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
 
LVL 30

Accepted Solution

by:
callrs earned 500 total points
ID: 16919864
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
 

Author Comment

by:djfenom
ID: 16920258
Excellent, thanks very much!
0
 
LVL 30

Expert Comment

by:callrs
ID: 16920907
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
 

Author Comment

by:djfenom
ID: 16921025
Thanks again, the larger images are between 35-50k, so there's not gonna be a massive wait anyway, even on dial up.
0
 
LVL 30

Expert Comment

by:callrs
ID: 16921884
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
replacing inline javascript with jquery 4 45
Two decimal 5 25
How do I post more than 1 item to php backend 24 29
sort Multi-dimensional array 6 10
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question