Question

我正在尝试使用bootstrap Carousel延迟加载。看起来这应该是直截了当的，但我在这里甚至没有任何错误来排除故障。 JS：

<script type="text/javascript">
    $('#bigCarousel').on("slid", function() {
        // load the next image after the current one slid
        var $nextImage = $('.active.item', this).next('.item').find('img');
        $nextImage.attr('src', $nextImage.data('lazy-load-src'));
    });

</script>

然后是html：

<div id="bigCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
        <img src="assets/bigimage1.jpg" class="img-big">
    </div>
    <div class="item">
        <img data-lazy-load-src="assets/menu-header2.jpg" class="img-big">
    </div>
 </div>
</div>

在firebug中没有JS错误或其他任何我能弄明白的错误，但我的图片只是没有加载。这里可能有点愚蠢......

Answer 1

最简单的解决方案是：

<div id="carousel" class="carousel slide lazy-load" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
  <div class="item active"><img src="image1.jpg"></div>
  <div class="item"><img data-src="image2.jpg"></div>
  <div class="item"><img data-src="image3.jpg"></div>
</div>
<!-- controls -->
<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
</div>

<script>
$(function() {
    $('.carousel.lazy-load').bind('slide.bs.carousel', function (e) {
        var image = $(e.relatedTarget).find('img[data-src]');
        image.attr('src', image.data('src'));
        image.removeAttr('data-src');
    });
});
</script>

那就是它！

Answer 2

我认为问题是你的nextImage var中的$。除非你试图提前预装1张幻灯片，否则我也会切换到“幻灯片”事件而不是“滑动”事件。此外，您应该考虑向前滚动和向后滚动。这包括检查从第一张照片到最后一张照片的循环，反之亦然。

$('#myCarousel').on("slide", function(e) {

        //SCROLLING LEFT
        var prevItem = $('.active.item', this).prev('.item');

        //Account for looping to LAST image
        if(!prevItem.length){
            prevItem = $('.active.item', this).siblings(":last");
        }

        //Get image selector
        prevImage = prevItem.find('img');

        //Remove class to not load again - probably unnecessary
        if(prevImage.hasClass('lazy-load')){
            prevImage.removeClass('lazy-load');
            prevImage.attr('src', prevImage.data('lazy-load-src'));
        }

        //SCROLLING RIGHT
        var nextItem = $('.active.item', this).next('.item');

        //Account for looping to FIRST image
        if(!nextItem.length){
            nextItem = $('.active.item', this).siblings(":first");
        }

        //Get image selector
        nextImage = nextItem.find('img');

        //Remove class to not load again - probably unnecessary
        if(nextImage.hasClass('lazy-load')){
            nextImage.removeClass('lazy-load');
            nextImage.attr('src', nextImage.data('lazy-load-src'));
        }

    });

Answer 3

我有一个解决方案，你只需要在临时图像属性中设置img-url / path，请参阅以下代码img具有属性 url

<div class="item">
 <img url="./image/1.jpg" src="">
  <div class="carousel-caption">
   <h4>title</h4>
   <p>content</p>
  </div>
</div>

当事件滑动时，设置值： src = url

$('document').ready(function() {     
        $('#myCarousel').on('slid', function (e) {
            var url = $('.item.active').find("img").attr('url'); 
            $('.item.active').find("img").attr("src", url); //set value : src = url
        });
});

Answer 4

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

您的加载时间为$nextImage.data('lazy-load-src')，但根据脚本编制，它应为$nextImage.data('data-lazy-load-src')。

Answer 5

我创建了一个免费的小代码片段，以便使用bootstrap进行延迟加载轮播。

代码在github上https://github.com/mconventi/lazy-load-bootstrap-carousel 它包括一个完整的工作示例。

随意使用和自定义;）

Bootstrap Carousel Lazy Load

5 个答案: