Advanced Search

Results 1 to 1 of 1

Thread: Changing from image swap to overlaying a loading GIF

  1. #1
    Join Date
    Jan 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Changing from image swap to overlaying a loading GIF

    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.

    Code:
    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):
    Code:
    <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.
    Last edited by lostb0y; 01-21-2009 at 05:02 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •