title: Bxslider - show images as they load
body: <p>I am using a Bxslider on my site and the markup goes like this:</p>
  
  <pre><code>&lt;div class="slide"&gt; 
  &lt;a target="_blank" href="#"&gt;&lt;img src="image.jpg"/&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;div class="slide"&gt; 
  &lt;a target="_blank" href="#"&gt;&lt;img src="image2.jpg"/&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;div class="slide"&gt; 
  &lt;a target="_blank" href="#"&gt;&lt;img src="image3.jpg"/&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;div class="slide"&gt; 
  &lt;a target="_blank" href="#"&gt;&lt;img src="image4.jpg"/&gt;&lt;/a&gt; 
  &lt;/div&gt;
  &lt;div class="slide"&gt; 
  &lt;a target="_blank" href="#"&gt;&lt;img src="image5.jpg"/&gt;&lt;/a&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Since some images used are too big, slider is taking long time to load.While loading, its displaying rotating circle and only shows images when ALL of them are loaded.
  Is there any chance that i can force it to show images as they load, one at a time?</p>
  
  <p>This is jQuery that makes it work:</p>
  
  <pre><code> $(document).ready(function(){
            $('.slider1').bxSlider({
              slideWidth: 258,
              minSlides: 1,
              maxSlides: 3.5,
              slideMargin: 10,
            });
          });
  </code></pre>