how to add a loading "spinner"

Question

i have some very simple js (i'm still learning) that basically reads the elements of a form and creates a url string that is passed to an imaging server, that in turn renders the image.

var imgURL = "site.com/path/to/image";
var product = "BirthdayCard_End" + "?&";
var page = 2;
var format;
var data;

function setPage(inputID)
    {
        page = inputID;
        setJPG();
    }

function FormValues()
    {
        var str = '';
        var elem = document.getElementById('form1').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "$" + elem[i].id + "=" + elem[i].value + "&";
        }
        data = str;         
    }

function genPDF()
    {
        var format = "fmt=pdf&mediaMargin=48&bleedMargin=48&printerMark=1,1,1,1,1,Illustrator,.25,1";
        fullURL = imgURL + product + data + format;
        window.open(fullURL);       

    }

function setJPG()
    {
        FormValues();
        var format = "imageRes=200&fmt=jpg&wid=550&page=" + page;
        fullURL = imgURL + product + data + format;
        document.getElementById('lblValues').innerHTML = fullURL;
        document.getElementById('image').src = fullURL;
    }

i'm trying to figure out how to show a simple loader like this (http://fgnass.github.com/spin.js/#v1.2.5). how do I add something to the setJPG() function so that it pops up the loader everytime it is initialized, and then fades away once the image is loaded?

Answer 1

You guys are making this way more complicated than it needs to be. Put your image in a div and set the background of the div to be an animated gif.

<div style="background-image: url('spinner.gif')"><img src='bigImage.jpg'></div>

No need to use any JS at all, the image will simply load over the background spinner.