延迟加载不能在引导轮播中工作 [英] lazy load not work in bootstrap carousel

问题描述

我使用bootstrap 3创建轮播，如下所示：

HTML：

 < div id =myCarouselclass =carousel slide> 
< div class =carousel-inner> 
< div class =active item> 
< img src =http://rivathemes.net/html/envor/img/posts/3.jpgclass =img-big> 
< / div> 
< div class =item> 
< img data-lazy-load-src =http://rivathemes.net/html/envor/img/posts/4.jpgclass =img-big> 
< / div> 
< / div> 
< div class =carousel-controls> 
< a class =left carousel-controlhref =＃myCarouseldata-slide =prev>< i class =fa fa-angle-double-left fa-lg> < / i>< / a> 
 
< a class =right carousel-controlhref =＃myCarouseldata-slide =next>< i class =fa fa-angle-double-right fa- lg>< / i>< / a> 
 
< / div> 
< / div> 
  

并将此代码添加到add img lazy加载。

JS：

  $（'＃myCarousel'）。on （'sliding'，function（）{
 var $ nextImage = $（'。active.item'，this）.next（'。item'）。find（'img'）; 
 $ nextImage .attr（'src'，$ nextImage.data（'lazy-load-src'））; 
}）; 
  

但是，这不适合我！可以解决这个问题吗？

重要问题：我可以为延迟加载添加图像预加载吗？

演示： FIDDLE

解决方案

http://jsfiddle.net/ys4je40u/

1. 向项对象添加 lazy-load b $ b
2. 使用 slide.bs.carousel 活动

strong> CSS ：

中心中心无重复;
}

JQ： b

  var cHeight = 0; 
 
 $（'＃myCarousel'）。on（'slide.bs.carousel'，function（e）{
 var $ nextImage = null; 
 
 activeItem = $（'。active.item'，this）; 
 
 if（e.direction =='left'）{
 $ nextImage = $ activeItem.next ）.find（'img'）; 
} else {
 if（$ activeItem.index（）== 0）{
 $ nextImage = $（'img：last'，$ activeItem .parent（））; 
} else {
 $ nextImage = $ activeItem.prev（'。item'）。find（'img'）; 
} 
} 
 
 //防止幻灯片高度减小
 if（cHeight == 0）{
 cHeight = $（this）.height（）; 
 $ activeItem.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'，''）; 
} 
}）; 
  

I create carousel using bootstrap 3 like this :

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.

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

解决方案

http://jsfiddle.net/ys4je40u/

1. add lazy-load class to item object
2. use slide.bs.carousel event

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', '');
    }
});

这篇关于延迟加载不能在引导轮播中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！