Image swap problem

[eiranix]

I have a script that loads a large image when you click a thumbnail. It uses an image placeholder that is hidden, so the script unhides it and swaps the image to the one that matches the thumbnail.

 

This works fine until you click on a different thumbnail - you see the first image for a split second before the new one loads. I tried to stop this by switching back to the 'loading' placeholder but for some reason this didn't work... Can anyone help?

function zoomIn(el) {   var id = el.id;  var zoom = document.getElementById('zoom');  var zoomcontainer = document.getElementById('zoomcontainer');  zoom.src = ("images/" + id + ".jpg");  zoomcontainer.className = "show";} function zoomOut(el){   el.className = "hide";  zoomcontainer.src = ("images/loading.gif");}

Edited June 27, 2014 by eiranix

[Hadien]

I would recommend that for images that can constantly change you should use the background-image in css. Have numerous classes each with their own background-image. the benefit is that it should cache the images on the clients PC so that the image isn't "re-downloaded" everytime the user zooms in. when the page loads you can make a loop that cycles through all possible images while its still hidden so that the browser caches the images for the user. Then, when you want to zoom in, you simply just change the css class in the element and the images change instantly.

 

You can take a look at this webpage (inside the iframe) that I've written recently where I follow this procedure. I didn't program in a preloader for the images (for certain reasons) on this page. So when you first play through the gallery, you can noticeably see the images loading. But when the galley loops back to the beginning and plays again, they update instantly. you can even spam clicks on the forward/backward button and the browser has no trouble keeping up and there's no undue stress on the server.

[davej]

You don't provide enough of your code for us to even make sense of it. Why, for example, is there a zoom.src and also a zoomcontainer.src? Why is zoomcontainer both a global and a local variable? Also why do you seem to have a loading.gif image when you hide the image?

[eiranix]

-Thanks davej, you made me realise what I was doing wrong! wow I must have been blind...

 

The zoomOut function was all wrong, it should've been:

function zoomOut(el){   el.className = "hide";  var zoom = document.getElementById('zoom');  zoom.src = ("images/loading.gif");} 

And sorry for the lack of info - 'zoom' is the image, 'zoomcontainer' is a div the image is in. The function shows/hides the container and swaps the image within it.

The loading.gif is the placeholder image, otherwise I have an image tag with no src.

 

 

-Hadien, The thing I liked about doing it this way was that, if you were to add an image later, all you need to do is add the one line of html for the thumbnail and it works.

Edited June 27, 2014 by eiranix

[davej]

You could preload the images or you could use the load event of each image to make sure it is not unhidden prematurely or you could use the window load event to prevent any unhiding until all images are finished loading.