相关疑难解决方法(0)

我使用bootstrap 3创建旋转木马,如下所示:

HTML:

<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">
            <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>

并添加此代码以添加img延迟加载.

JS:

$('#myCarousel').on('slid', function () {
    var $nextImage = $('.active.item', this).next('.item').find('img');
    $nextImage.attr('src', $nextImage.data('lazy-load-src'));
});

但是,这对我不起作用!？可以解决这个问题吗？

重要问:我可以为延迟加载添加图像预加载器吗？!

演示:FIDDLE