使用 LazySizes 延迟加载轮播图像

Posted 2023-03-06

【中文标题】使用 LazySizes 延迟加载轮播图像

【英文标题】：Lazy loading a carousel images with LazySizes

【发布时间】：2017-11-26 20:21:32

【问题描述】：

我正在使用 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

【问题讨论】：

也许你可以复制这个答案的概念：***.com/a/27677524/7387397

【参考方案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 包含小胡子符号（这显然不起作用）。

【讨论】：

您可能需要使用ng-class, see here for example.

@为什么你认为我可能需要使用ng-class，@music？您链接的 plunker 还在 <img> 标签上使用 class="lazyload"。

你是对的，但是当你将class 更改为ng-class 时，plunker 才开始工作。

here 是解释：“这种方式lazysizes 等到angular 改变了url 占位符。”

我不太明白你的解释，但你可能是对的，我的例子不相关......它使用src，似乎这就是图片不显示的原因。它们在使用ng-class="lazyload" 时会显示出来。在您的回答中，您使用的是ng-src，这使得我的评论可能也无关紧要。

【参考方案2】：

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

png：

http://compresspng.com/it/

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

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

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

【参考方案3】：

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

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

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

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

【讨论】：

感谢您的回答，但除非我不明白，否则我认为此插件有助于了解所有图像何时加载，然后执行某些操作。我想我需要相反，加载轮播的那一刻应该加载所有图像，你不觉得吗？