使用LazySizes延迟加载轮播图像

Question

我在我的AngularJs应用程序中使用Lazysizes延迟加载旋转木马.

如果我对图像执行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 完成渲染也很有用。您可以在这里查看解释：

/sf/answers/2754221641/