使用LazySizes延迟加载传送带图像

Question

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

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

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

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

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

Answer 2

最好的解决方案是与data-srcset一起为src使用小的、模糊的后备图像。这样做的目的是加载控制器init上的小拇指，并在它们进入视图时加载大拇指。

当它们滑入视图时，大图像通常已经加载并显示，取代了模糊的拇指。即使焦点效果很明显，它看起来仍然很专业。

这是一段限制了网络带宽的视频：

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>

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

此外，正如@musicformelons在评论中指出的那样，需要通过ng-class应用lazyload类。直接在标记中应用它会使Lazysize在Angular解析urls之前过早地实例化，导致urls包含八字胡符号(这显然不起作用)。

Answer 3

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

png：

http://compresspng.com/it/

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

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

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