Swaped Image only partially loads?

**MrCup** · 03-06-2006, 07:27 AM

Hi,

I've been having a problem with swapping images. I wrote this code;

Code:

function swapImage(target,location) {
  if (document.images) {
    document[target].src = location
  }
}

<a href="javascript:;" onClick="swapImage('bigpic','images/pic1.jpg')"><img src="images/thumbs/pic1thumb.jpg" width="61" height="85" border="0"></a>

When you click the thumb it loads the full size pic in to the image 'bigpic'. The problem is that it often only loads a part of the image. Even if they full image has previously loaded and should be sitting in cache. Any ideas?
Thanks

**MrCup** · 03-06-2006, 07:47 AM

Actually I've just done some more testing and it seems that 'onClick' won't load them at all. When you click it removes the placeholder pic but the new one doesn't load.

I tried changing them to 'OnMouseDown' but it's not much better. You have to click and hold the mouse button down and wait for a second before the image loads. Once loaded it will work instantly if you click again.

Does anyone have an idea what it happening?

**jscheuer1** · 03-06-2006, 07:48 AM

Your code as written will not work as, the img tag has no attribute name="bigpic", which it would need for this to work. As to why there is partial image loading or perhaps partial image obstruction, I would have to see the actual page to be able to even have a clue.

PLEASE: Include the URL to your problematic webpage that you want help with.

**MrCup** · 03-06-2006, 07:52 AM

Originally Posted by jscheuer1

the img tag has no attribute name="bigpic"

It's actually targeting another image. Sorry I didn't include that bit of code as it's just a tag elsewhere.

Here is the URL LINK

**jscheuer1** · 03-06-2006, 08:15 AM

Two things that I see right off, one (others are probably similarly large) of the 'big images' is 50k, far larger than it need be, use an image optimization program* and put those big images on a diet! This will speed load time. Another thing that is missing from this setup is a preloading scheme. Something like:

Code:

<script type="text/javascript">
function preload(){
var loader=new Array();
var bigones=['big1.jpg', 'big2.jpg', 'big3.jpg']
for (var i_tem = 0; i_tem < bigones.length; i_tem++){
loader[i_tem]=new Image();
loader[i_tem].src=bigones[i_tem]
}
}
onload=preload;
</script>

In the head of the page would get the larger images ready. Bottom line, the larger images are so big that they can overwhelm the browser and make it hang when they are suddenly inserted into the DOM without having been preoladed. For best results, make the images smaller and preload them.

* DD has an online optimizer linked from their main page, xat.com has a very good program available for trial from their website, there are others.

**MrCup** · 03-06-2006, 08:43 AM

Thanks for the help. I'll give them a go. I didn't think that such (relatively) small images would make it hang like that.

**jscheuer1** · 03-06-2006, 08:52 AM

50k is pretty big for the web, 20k is more reasonable and 10k is just about ideal for broadband, dial-up and web images don't do so well together under most conditions. These figures are more crucial when multiple images are involved, one big image on a page isn't so bad with broadband. What makes it even tougher on the browsers in this situation is that the image is suddenly thrust upon it when it isn't expecting it. IE was bad with this when I tested your page, Opera handled it rather gracefully, simply taking its time and at least loading the image as it was caching it. IE didn't seem to be able to 'walk and chew gum' at the same time though (cache and display).

EDIT: One other thing, optimizing all the images on the page, including the thumbnails and any used simply for display purposes will lower the overall overhead of the page and make things load faster and work more smoothly.

**jscheuer1** · 03-06-2006, 09:34 AM

I was looking at your page and site in general a bit more and it appears as though the permissions on the image directories and/or image files may not be set correctly.