title: Slick.js: Hide slider until images have loaded
body: <p>Using <a href="http://kenwheeler.github.io/slick/">Slick.js</a>, how does one hide the slide until the images have loaded or at least the first image has loaded? I tried using <code>init</code> but couldn't get it to work. Nothing is outputted to the console, either.</p>
  
  <pre><code>var $slider = $('.slider').slick({
      fade: true,
      focusOnSelect: true,
      lazyLoad: 'ondemand',
      speed: 1000
  });
  
  $('.slider').on('init', function(slick) {
      console.log('fired!');
      $('.slider').fadeIn(3000);
  });
  </code></pre>
  
  <p>I also tried <code>window load</code>, but that didn't fix it either.</p>
  
  <pre><code>$(window).load(function() {
      $('.slider').fadeIn(3000);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/q5r9ertw/">http://jsfiddle.net/q5r9ertw/</a></p>