title: lazy load not work in bootstrap carousel
body: <p>I create carousel using bootstrap 3 like this :</p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="active item"&gt;
              &lt;img src="http://rivathemes.net/html/envor/img/posts/3.jpg" class="img-big"&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img data-lazy-load-src="http://rivathemes.net/html/envor/img/posts/4.jpg" class="img-big"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="carousel-controls"&gt;
  &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;i class="fa fa-angle-double-left fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;i class="fa fa-angle-double-right fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and add this code for add <code>img</code> lazy load. </p>
  
  <p>JS : </p>
  
  <pre><code>$('#myCarousel').on('slid', function () {
      var $nextImage = $('.active.item', this).next('.item').find('img');
      $nextImage.attr('src', $nextImage.data('lazy-load-src'));
  });
  </code></pre>
  
  <p>But, This not work for me!? can do fix this ?</p>
  
  <p>Important Q: can i add image preloader for lazy load?! </p>
  
  <p>DEMO : <a href="http://jsfiddle.net/BoWw/51muqdLf/">FIDDLE</a></p>