title: show loading.gif before starting script
body: <p>I am using a script which takes some time to load, so I want to show a loading.gif image while the user is waiting. When I looked up how to do this, I came up with something like this:</p>
  
  <pre><code>    &lt;div&gt;
          &lt;div class="loader" style="position:center;top:300px;background-color:white;padding:20px;margin-left:45%;"&gt;
                  &lt;img src="visualisation-arbor/loading36.gif" alt="Loading Image"/&gt;
          &lt;/div&gt;
          &lt;canvas class="explore_area" id="viewport"&gt;
          &lt;/canvas&gt;   
      &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt; 
      jQuery(function($){jOWL_loader.load()});
      function loop(){
          var loaded = jOWL_loader.get();
          if (!loaded){
              setTimeout(function(){loop()}, 5)
          } else {
              $('.loader').hide();
              visualize(loaded)
          }
      }
      loop();
  &lt;/script&gt;
  </code></pre>
  
  <p>With this code, there is no gif image showed. Do I implemented something wrong, or in the wrong order?</p>
  
  <p>btw: the .gif file is stored local and is 4 kb in size</p>