Question

我为bootstrap carousel image lazyload添加插件，如下所示：

CSS：

.carousel .item {
    background-color: #000;
}
.carousel .loading {
    width:46px;
    height:46px;
    position:absolute;
    top:50%;
    left:50%;
    background:#000 url(http://media.gillettevenus.com/Common/Assets/Images/ajax-loader.gif) no-repeat center center;
    margin:-23px 0px 0px -23px;
    z-index:100;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0.7;
}

JS：

$(document).ready(function () {
    $('.carousel').carousel();
});

我的动作lazy-src不起作用，bootstrap轮播只显示jQuery 1.11中的第一张图片。但是在jQuery 1.8 Worked中。我怎么能解决这个问题？！

不起作用DEMO FIDDLE

工作DEMO FIDDLE

Answer 1

您可以使用lazySizes。 lazySizes的好处是lazySizes可以作为自我初始化组件。这意味着它可以与任何类型的图像（和其他）延迟加载无缝地工作，而无需额外的JS配置。无论您使用的是旋转木马，大型菜单，无限滚动等等。这极大地有助于分离关注点。例如，如果你从bootstrap carousel切换到光滑的滑块，或者你的网站上有一些其他更大的图像并且想要延迟加载它们，那么你需要的唯一脚本是lazySizes。

在您的文档中添加lazySizes后，您只需添加课程lazyload和data-src属性。

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    class="lazyload"
    data-src="image.jpg"
    alt="my image" />

http://jsfiddle.net/trixta/g21qL7xd/embedded/result/（没有进度微调）
http://jsfiddle.net/trixta/99b7tshc/embedded/result/（有进度微调）

另请注意，您应添加intrinsic ratio pattern，以便占用图片空间。

Answer 2

尝试下面给出的代码段：

$(".carousel").on('slid.bs.carousel', function (e) {
    var $active = $(this).find('.carousel-indicators').find('li.active');
    fixLazyLoadCarousel($active);
});
function fixLazyLoadCarousel($active) {
    var $targetImage = $($active.data('target')+" .carousel-inner").find(".item:eq("+$active.data('slide-to')+")").find('img');
    var src = $targetImage.data('src');
    if (typeof src !== "undefined" && src != "") {
        $targetImage.attr('src', src)
        $targetImage.data('src', '');
    }
}

在这里看到小提琴： http://jsfiddle.net/51fLLtq2/20/

Bootstrap 3 carousel lazyload插件无法使用jQuery 1.11

2 个答案: