how to add a loading "spinner"
<p>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.  </p>

<pre><code>var imgURL = "http://testvipd7.scene7.com/is/agm/papermusepress/";
var product = "BirthdayCard_End" + "?&amp;";
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 &lt; elem.length; i++)
        {
            str += "$" + elem[i].id + "=" + elem[i].value + "&amp;";
        }
        data = str;         
    }

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

    }

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

<p>i'm trying to figure out how to show a simple loader like this (<a href="http://fgnass.github.com/spin.js/#v1.2.5" rel="nofollow">http://fgnass.github.com/spin.js/#v1.2.5</a>).  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?</p>
