title: Flexslider slow image load
body: <p>I am using Flexslider on a website I'm building. </p>
  
  <p>I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar.</p>
  
  <p>The negative about it is that it doesn't display the first image before all images are loaded. So you have to wait to all images in the slider is loaded to make the site look properly. This is acceptable on a desktop/laptop but not on a mobile device.</p>
  
  <p>I found a similar question here <a href="https://stackoverflow.com/questions/11577369/flexslider-image-preloader">Flexslider - image preloader</a> but I couldn't get it to work.</p>
  
  <p>I use this to trigger the code</p>
  
  <pre><code>$(window).load(function() {
          $('.flexslider').flexslider();
      });
  </code></pre>
  
  <p>And this in my HTML</p>
  
  <pre><code>                &lt;ul class="slides"&gt;             
                  &lt;li&gt;
                      &lt;img src="pictures/slide1.jpg" alt=" "&gt;
                  &lt;li&gt;
                      &lt;img src="pictures/slide2.jpg" alt=" "&gt;                         
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;img src="pictures/slide3.jpg" alt=" "&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;img src="pictures/slide4.jpg" alt=" "&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>The question is. How can I make the slider show the first image as quick as possible? and then the second and so on.</p>
  
  <p>EDIT: I solved the problem. It is presented in the correct answer below. If you have a better solution: please share :D</p>