title: How to hide images until AFTER jquery flexslider finishes loading
body: <p>I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.</p>
  
  <p>When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.</p>
  
  <p>I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! -  <a href="http://flexslider.woothemes.com/carousel-min-max.html" rel="noreferrer">http://flexslider.woothemes.com/carousel-min-max.html</a> )</p>
  
  <p>I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:</p>
  
  <pre><code>$(document).ready(function() {
  
    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 210,
      itemMargin: 5,
      minItems: 2,
      maxItems: 4
    });
  });
  </code></pre>