延迟加载一个旋转木马图像与懒洋洋的大小

I´m using Lazysizes to lazyload a carousel in my AngularJs app.

我使用Lazysizes lazyload´AngularJs应用旋转木马。

If I do lazysizes on images, it works, but I don´t like the effect, because the images are loaded the moment the user click on the arrow buttons to change the images, but there are some milliseconds the image is white while loading. This is the code:

如果我做lazysizes图像,它的作品,但我´t像效果,因为图像加载当前用户点击箭头按钮来改变图片,但是有一些毫秒图像加载时是白色的。这是代码:

<div class="carousel slide">
                            <carousel interval="-10">
                                <slide ng-repeat="i in imagesList">
                                    <img data-src="image-url.jpg" class="lazyload"  />
                                </slide>                                    
                            </carousel>
                        </div>

However, what I would like to do is to lazyload the carousel itself. But the moment the carousel is loaded, then all images in that carousel should be loaded to avoid that ugly effect.

但是，我想做的是给旋转木马本身装上懒洋洋的东西。但是当旋转木马被加载时，所有的图片都应该被加载以避免这种丑陋的效果。

<div class="carousel slide lazyload">
                        <carousel interval="-10">
                            <slide ng-repeat="i in imagesList">
                                <img ng-src="image-url.jpg" />
                            </slide>                                    
                        </carousel>
                    </div>

I don´t know how to do this or if it´s possible. I think my carousel comes from bootstrap 2.3.2

´我不知道该怎么做或者´s。我想我的旋转木马来自于bootstrap 2.3.2。

3 个解决方案

#1

If you want to listen to the event where all the images in a certain component are loaded this library can help you do that - https://github.com/desandro/imagesloaded. When the images are loaded you can either initialize or reload the carousel.

如果您想要侦听加载某个组件中的所有图像的事件，这个库可以帮助您实现这一点——https://github.com/desandro/imagesloaded。当加载图像时，您可以初始化或重新加载旋转木马。

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

Sometimes, when loading a carousel it is also useful if you wait for the ng-repeat to finish rendering before initializing. You can take a look here for an explanation:

有时，当加载旋转木马时，如果您等待ng-repeat在初始化之前完成呈现，那么它也是有用的。你可以在这里找到一个解释:

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

#2

Best solution is to use small, blurry fallback images for src, alongside with data-srcset. What this does is load the small thumbs on controller init and load the large ones when they come into view.
By the time they finish sliding into view, the large image is typically already loaded and displayed, replacing the blurry thumb. Even when the focus-in effect is noticeable, it still looks professional.

最好的解决方案是为src使用小而模糊的回退图像，同时使用data-srcset。它所做的是在控制器init上加载小的拇指并在它们进入视图时加载大的。当它们滑进视图时，大图像通常已经被加载和显示，取代了模糊的拇指。即使焦点很明显，它仍然看起来很专业。

Here's a working example.
And here's a video recording with Network bandwidth throttled:
https://www.youtube.com/watch?v=mydnPTIc-4g&feature=youtu.be - the quality has been greatly reduced when I uploaded the video on youtu.be - there's not much I can do about that, but you can clearly notice the effect in action.

这是一个工作示例。这是一个带有网络带宽的视频记录:https://www.youtube.com/watch? ? ?我对此无能为力，但你可以清楚地看到它的作用。

I've used a simple gaussian blur effect for the thumbs and saved the large ones @100% quality on purpose, to make sure they don't load too fast (they are almost double in size compared to @80% - which is what you should normally use in production).

我对拇指使用了一个简单的高斯模糊效果，并有意地保存了大的一个@100%的质量，以确保它们不会加载得太快(它们的大小几乎是@80%的两倍——这是您在生产中应该经常使用的)。

A typical element looks like this:

一个典型的元素是这样的:

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

If they still load too fast (and you don't notice the effect), go in developer console (on network tab) and limit (throttle) the network bandwidth.

如果它们的加载速度仍然太快(而且您没有注意到这种影响)，请进入开发人员控制台(在network选项卡上)并限制网络带宽。

With Angular, this would mean:

对于角，这意味着:

.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>

In order to work, resulting urls should be pointing to existing files of different sizes and you might need to adjust the way you build each path, depending on your case.

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

#3

first thing you can do is compress your images:

首先你要做的就是压缩你的图像:

png:

http://compresspng.com/it/

if you need it use the jpeg alternative compressjpeg.com

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

it will help you on loading quickly your image. then I found this article really interesting:

它将帮助你快速加载你的图像。然后我发现这篇文章非常有趣:

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

#1

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