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

Answer 2

最佳解决方案是使用src的小型模糊后备图像以及data-srcset。这样做是在控制器init上加载小拇指，并在它们进入视野时加载大拇指当他们完成滑入视图时，通常已经加载并显示大图像，取代模糊的拇指。即使聚焦效果明显，它仍然看起来很专业。

这里是working example 这是一个带有网络带宽限制的视频录制：
https://www.youtube.com/watch?v=mydnPTIc-4g&feature=youtu.be - 当我将视频上传到youtu.be时，质量大大降低了 - 我对此无能为力，但你可以清楚地注意到效果。

我已经使用了一个简单的高斯模糊效果用于拇指并保存了大量的100％质量，以确保它们不会加载太快（它们的大小几乎是两倍） @ 80％ - 这是你通常应该在制作中使用的东西。）

典型元素如下所示：

 <div class="item">
     <img src="./02-small.jpg"
          data-srcset="./02-medium.jpg 768w, 
                       ./02.jpg 1200w" 
          class="lazyload img-responsive" />
 </div>

如果它们仍然加载太快（并且您没有注意到效果），请进入开发者控制台（在网络选项卡上）并限制（限制）网络带宽。

使用Angular，这意味着：

.carousel .img-responsive {
  min-width: 100%;
}

<div class="carousel slide">
  <carousel>
     <slide ng-repeat="i in imagesList">
        <img ng-src="./{{i.filename}}-small.jpg" 
             data-srcset="./{{i.filename}}-medium.jpg 768w,
                          ./{{i.filename}}.jpg 1200w" 
             class="lazyload img-responsive"
         />
     </slide>                                    
  </carousel>
</div>

为了工作，生成的网址应指向不同大小的现有文件，您可能需要根据具体情况调整构建每个路径的方式。

Answer 3

你可以做的第一件事是压缩你的图像：

PNG：

http://compresspng.com/it/

如果需要，请使用jpeg替代compressjpeg.com

它可以帮助您快速加载图像。然后我发现这篇文章非常有趣：

https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

使用LazySizes延迟加载轮播图像

3 个答案: