title: bxSlider won't load loading animation (bx_loader.gif) before the slide-images
body: <p>I recently installed the <a href="http://bxslider.com/" rel="nofollow">bxSlider</a> on my <a href="http://www.wahooka.net/" rel="nofollow">homepage</a> and most of the code worked fine after the JavaScript/CSS configuration, except the loading animation (a tiny circling wheel, *bx_loader.gif*). Then I discovered - with the help of some geeky friends - that the loading <em>.gif</em> is always loaded <strong>after</strong> the images of the bxSlide. 
  It can't show up with this loading order, so I tried some workarounds, like a <em>base64</em> encoded loading <em>.gif</em> in the stylesheet and (what you can see now on my mentioned homepage) a "preloading image":</p>
  
  <pre><code>&lt;img src="./Karussell/BXSlider/images/bx_loader2.gif" width="1px" height="1px" /&gt;
  </code></pre>
  
  <p>It works now (you see the loading animation) - but it's not very elegant.</p>
  
  <p>So I got some questions: </p>
  
  <ul>
  <li>Is there any other "clean" method (beside the described preloading tricks/hacks) to ensure, that the loading <em>.gif</em> is loaded <strong>before</strong> the bxSlide?</li>
  <li>Did anybody encounter similar problems with bxSlider? The demo-pages on the bxSlider-hompage work flawlessly...</li>
  <li>Could anybody look into the bxSlider-JavaScript and tell me, if the loading order could be changed via JavaScript/JQuery (I'm not that JS-professional), please?</li>
  </ul>
  
  <p>Thanks in advance!</p>
  
  <p>Wahooka</p>