JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item">
            <img src="http://rivathemes.net/html/envor/img/posts/3.jpg" class="img-big">
        </div>
        <div class="item lazy-load">
            <img data-lazy-load-src="http://rivathemes.net/html/envor/img/posts/4.jpg" class="img-big">
        </div>
    </div>
    <div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-angle-double-left fa-lg"></i></a>

<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-angle-double-right fa-lg"></i></a>

    </div>
</div>

CSS

.lazy-load {
    background: url("http://www.mozart.it/images/preloader.gif") center center no-repeat;
}

JavaScript

var cHeight = 0;

$('#myCarousel').on('slide.bs.carousel', function () {
    var $nextImage = $('.active.item', this).next('.item').find('img');

    if (cHeight == 0) {
        cHeight = $(this).height();
        $('.active.item', this).next('.item').height(cHeight);
    }

    var src = $nextImage.data('lazy-load-src');

    if (typeof src !== "undefined" && src != "") {
        $nextImage.attr('src', src)
        $nextImage.data('lazy-load-src', '');
    }
});