延迟加载在bootstrap轮播中不起作用

I create carousel using bootstrap 3 like this :

我使用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>

and add this code for add img lazy load.

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

JS :

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

But, This not work for me!? can do fix this ?

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

Important Q: can i add image preloader for lazy load?!

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

DEMO : FIDDLE

演示:FIDDLE

4 个解决方案

#1

http://jsfiddle.net/ys4je40u/

add lazy-load class to item object

将lazy-load类添加到item对象

use slide.bs.carousel event

使用slide.bs.carousel事件

CSS:

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

JQ:

var cHeight = 0;

$('#myCarousel').on('slide.bs.carousel', function (e) {
    var $nextImage = null;

    $activeItem = $('.active.item', this);

    if (e.direction == 'left'){
        $nextImage = $activeItem.next('.item').find('img');
    } else {
        if ($activeItem.index() == 0){
            $nextImage = $('img:last', $activeItem.parent());
        } else {
            $nextImage = $activeItem.prev('.item').find('img');
        }
    }

    // prevents the slide decrease in height
    if (cHeight == 0) {
       cHeight = $(this).height();
       $activeItem.next('.item').height(cHeight);
    }

    // prevents the loaded image if it is already loaded
    var src = $nextImage.data('lazy-load-src');

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

#2

The answer by dm4web does not account for skipping slides by directly clicking the carousel indicators. This version correctly loads an image regardless of how you slide to it, using Bootstrap's event.relatedTarget (the item being slid into place, see the official documentation). Try running the snippet below and clicking on the indicators to switch several slides ahead.

dm4web的答案并未考虑通过直接单击轮播指示符来跳过幻灯片。使用Bootstrap的event.relatedTarget(该项目滑入到位,请参阅官方文档),此版本正确加载图像,无论您如何滑动到该图像。尝试运行下面的代码段并单击指示器以切换前面的几个幻灯片。

var cHeight = 0;

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {

  var $nextImage = $(e.relatedTarget).find('img');

  $activeItem = $('.active.item', this);

  // prevents the slide decrease in height
  if (cHeight == 0) {
    cHeight = $(this).height();
    $activeItem.next('.item').height(cHeight);
  }

  // prevents the loaded image if it is already loaded
  var src = $nextImage.data('lazy-load-src');

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/5000x1000">
      </div>
      <div class="item">
        <img data-lazy-load-src="http://placehold.it/5001x1000">
      </div>
      <div class="item">
        <img data-lazy-load-src="http://placehold.it/5002x1000">
      </div>
      <div class="item">
        <img data-lazy-load-src="http://placehold.it/5003x1000">
      </div>
      <div class="item">
        <img data-lazy-load-src="http://placehold.it/5004x1000">
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>

#3

If you have multiple images in your slide, you have to use this :

如果幻灯片中有多个图像,则必须使用:

var cHeight = 0;

$('#carousel').on('slide.bs.carousel', function (e) {
    var $nextImage = null;

    $activeItem = $('.active.item', this);

    if (e.direction == 'left'){
        $nextImage = $activeItem.next('.item').find('img');
    } else {
        if ($activeItem.index() == 0){
            $nextImage = $('img:last', $activeItem.parent());
        } else {
            $nextImage = $activeItem.prev('.item').find('img');
        }
    }

    // prevents the slide decrease in height
    if (cHeight == 0) {
       cHeight = $(this).height();
       $activeItem.next('.item').height(cHeight);
    }

    // => Changes here ! 
    // prevents the loaded images if it is already loaded
    $nextImage.each(function(){
        var $this = $(this),
            src = $this.data('original');

        if (typeof src !== "undefined" && src != "") {
           $this.attr('src', src)
           $this.data('original', '');
        }
    });
});

#4

Created this "kinda generic" solution some months ago and had no issues so far...

几个月前创建了这种“有点通用”的解决方案,到目前为止没有任何问题......

var $ajaxCarousel = $('.carousel-ajax');

if ($ajaxCarousel.length > 0) {
    $ajaxCarousel.on('slide.bs.carousel', function (e) {
        var $upcomingImage = $(e.relatedTarget).find('img');
        if (typeof $upcomingImage.attr('src') === 'undefined') {
            $upcomingImage.attr('src', $upcomingImage.data('src'));
        }
    });
    // preload first image
    $ajaxCarousel.each(function() {
        var $firstImage = $(this).find('[data-slide-number=0]').find('img');

        $firstImage.attr('src', $firstImage.data('src'));
    });
}

All you have to do in HTML is add "carousel-ajax" class to your existing carousel and prepend "data-" in front of your img's src tags:

您只需要在HTML中添加“carousel-ajax”类添加到现有的轮播中,并在img的src标签前添加“data-”:

<img data-src="..." />

#1