title: how to add a loading "spinner"
body: <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 = "site.com/path/to/image";
  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>