weixin_48048228 2021-11-29 13:09 采纳率: 0%
浏览 23

如何使用Bootstrap轮播插件如何使用lazyload

问题遇到的现象和发生背景
问题相关代码,请勿粘贴截图
This answer is not useful
The simplest solution would be:

<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>
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答

1条回答 默认 最新

  • 你好!机器人 2021-11-29 13:36
    关注
    image.attr("src", image.data('lazy-load-src'));
    
    
    评论

报告相同问题?

问题事件

  • 创建了问题 11月29日