javascript - 使用 LazySizes 延迟加载轮播图片

Question

我正在使用 Lazysizes 在我的 AngularJs 应用中延迟加载轮播。

如果我对图像执行 lazysizes，它会起作用，但我不喜欢这种效果，因为图像是在用户单击箭头按钮更改图像时加载的，但有几毫秒图像是白色的加载时。这是代码:

<div class="carousel slide">
                            <carousel interval="-10">
                                <slide ng-repeat="i in imagesList">
                                    <img data-src="image-url.jpg" class="lazyload"  />
                                </slide>                                    
                            </carousel>
                        </div> 

但是，我想做的是延迟加载轮播本身。但是在加载轮播的那一刻，应该加载该轮播中的所有图像以避免出现这种丑陋的效果。

<div class="carousel slide lazyload">
                        <carousel interval="-10">
                            <slide ng-repeat="i in imagesList">
                                <img ng-src="image-url.jpg" />
                            </slide>                                    
                        </carousel>
                    </div>

我不知道该怎么做或是否可行。我认为我的轮播来自 bootstrap 2.3.2

Answer 1

如果你想监听某个组件中的所有图像都被加载的事件，这个库可以帮助你做到这一点 - https://github.com/desandro/imagesloaded .加载图像后，您可以初始化或重新加载轮播。

$element.imagesLoaded( function() {
  // reload carousel
});

有时，在加载轮播时，如果您在初始化之前等待 ng-repeat 完成渲染也很有用。您可以在这里查看解释:

https://stackoverflow.com/a/39346023/1385281