使用 LazySizes 延迟加载轮播图像

Question

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

如果我对图像进行延迟大小调整，它可以工作，但我不喜欢这种效果，因为图像在用户单击箭头按钮更改图像的那一刻加载，但有几毫秒图像是白色的加载时。这是代码：

<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

最好的解决方案是为src 和data-srcset 一起使用小的、模糊的后备图像。它的作用是在控制器初始化时加载小拇指并在它们出现时加载大拇指。
当他们完成滑入视图时，大图像通常已经加载并显示，取代了模糊的拇指。即使对焦效果很明显，它仍然看起来很专业。

这是一个网络带宽受限的视频录制：
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" 
             ng-class="['lazyload', 'img-responsive']"
         />
     </slide>                                    
  </carousel>
</div>

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

另外，正如@musicformelons 在 cmets 中指出的那样，lazyload 类需要通过ng-class 应用。直接在标记中应用它会使 Lazysizes 在 Angular 解析 url 之前过早实例化，导致 url 包含小胡子符号（这显然不起作用）。

Answer 2

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

png：

http://compresspng.com/it/

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

它将帮助您快速加载图像。然后我发现这篇文章真的很有趣：

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

Answer 3

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

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

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

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