PDA

View Full Version : Changing from image swap to overlaying a loading GIF



lostb0y
01-21-2009, 05:56 PM
Hi folks,
I'd better jump in with a coding question while I await my first post answer (er.. I might be waiting)..
Being a noob is never easy!


I've a page that has an image viewer and a series of scrolling thumbnails (it's actually part of a Lightroom gallery generator)

I'm using the following code to create an image swap with a loading GIF.


function showNewImage(img)
{
var element = document.getElementById("theImage");
element.src = "resources/loading.gif";
element.alt = "loading...";

var image = new Image();
image.onload = function()
{
document.getElementById("theImage").src = this.src;
document.getElementById("theImage").alt = "";
}
image.src = img.getAttribute("imgsrc");
image.value = img.getAttribute("imagetitle");
image.width = img.getAttribute("imagewidth");
image.height = img.getAttribute("imageheight");
}


And my HTML looks like this (ignore the <% %> codes, that's lua for the generator):

<div id="image_viewer"><img id="theImage" src="$firstImage" /></div>
</div>
<div id="thumb_viewer"><% for iNumber=1, math.max(model.nonCSS.numIm) do %>

<a class="thumbnail" onclick="showNewImage(this);" imgsrc="bin/images/photos/<%= getImage(iNumber).exportFilename %>.jpg" id="<%= getImage(iNumber).imageID %>" ><img src="bin/images/thumbs/<%= getImage(iNumber).exportFilename %>.jpg" title="<%= getImage(iNumber).exportFilename %>" /></a><% end %>

</div>

This works fine for what I initially envisioned, but of course now that I've got it working I think it looks crap. Instead, I'd like to have the loading GIF show over the current image as the new image loads and then have the GIF go when the new image is loaded.
Any direction would be much appreciated.