Changing from image swap to overlaying a loading GIF
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.
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):
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.
<div id="image_viewer"><img id="theImage" src="$firstImage" /></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 %>
Any direction would be much appreciated.