Bootstrap 3 carousel lazyload 插件不适用于 jQuery 1.11

Bootstrap 3 carousel lazyload plugin not work With jQuery 1.11

本文关键字：适用于 jQuery 不适用 插件 carousel lazyload Bootstrap      更新时间：2023-09-26

>我为引导轮播图像延迟加载添加了插件，如下所示：

.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不起作用，引导轮播仅在 jQuery 1.11 中显示第一个图像。但是在jQuery 1.8中起作用了。我该如何解决这个问题？！

不工作演示小提琴

工作演示小提琴

你可以为此使用 lazySize。lazySize的好处是lazySize作为一个自初始化组件工作。这意味着它可以与任何类型的图像（和其他）延迟加载无缝协作，而无需额外的JS配置。无论您使用的是轮播，大型菜单，无限滚动等。这极大地有助于分离关注点。例如，如果您要从引导轮播切换到光滑的滑块，或者您的网站上有一些其他较大的图像并希望延迟加载它们，则您唯一需要的脚本是 lazySize。

将 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/（带进度微调器）

另请注意，您应该添加固有比率模式，以便占用图像空间。

尝试下面给出的代码片段：

$(".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/

相关文章：