title: Flexslider - image preloader
body: <p>I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable. </p>
  
  <p>I was hoping someone can help me with the following flexslider image preloader script since I can't get it to work.</p>
  
  <p>Here is the code I'm using:</p>
  
  <p>FLEXSLIDER HTML</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; "&gt;
          &lt;ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); "&gt;
  
          &lt;li style="float: left; display: block; width: 940px; "&gt;
          &lt;img src="image1.jpg"&gt;  
          &lt;/li&gt;
          &lt;li style="float: left; display: block; width: 940px; "&gt;
          &lt;img src="image2.jpg"&gt;  
          &lt;/li&gt;                       
          &lt;li style="float: left; display: block; width: 940px; "&gt;
          &lt;img src="image3.jpg"&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>FLEXSLIDER SCRIPT IN HTML HEAD</p>
  
  <pre><code>&lt;!-- FlexSlider --&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
      $(window).load(function() {
      $('.flexslider').flexslider({
      animation: "slide",  
      slideshow: false,
      controlsContainer: ".slider"
  
      start: function(slider) {
      slider.removeClass('loading');}
  
          });
   });                    
  
  &lt;/script&gt;
  </code></pre>
  
  <p>FLEXSLIDER.CSS</p>
  
  <pre><code>.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;}
  </code></pre>
  
  <p>Any help is appreciated!</p>