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

Question

我像这样为 bootstrap carousel 图像延迟加载添加插件:

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();
});

i action lazy-src 无效，bootstrap carousel 在 jQuery 1.11 中只显示第一张图片。但在 jQuery 1.8 中有效。我该如何解决这个问题？!

不工作 DEMO FIDDLE

工作 DEMO FIDDLE

Answer 1

您可以使用 lazySizes为了这。 lazySizes 的好处在于 lazySizes 作为一个自初始化组件工作。这意味着它可以无缝地与任何类型的图像(和其他)延迟加载一起工作，而无需额外的 JS 配置。无论您使用的是旋转木马、大型菜单、无限滚动等。这极大地有助于分离关注点。例如，如果您要从 bootstrap carousel 切换到 slick slider，或者您的网站上有一些其他较大的图像并且想要延迟加载它们，您唯一需要的脚本是 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 , 这样图片的空间就被占用了。