14

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

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:

<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

Rober
  • 5,868
  • 17
  • 58
  • 110
  • maybe you can copy the concept of this answer: https://stackoverflow.com/a/27677524/7387397 – Sysix Jun 29 '17 at 21:25

3 Answers3

4

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.

$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:

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

korun
  • 2,211
  • 1
  • 16
  • 12
  • Thanks for your answer, but unless I didn´t understand, I think this plugin helps to know when all images are loaded and then do something. I think I need the opposite, the moment the carousel is loaded all the images should be loaded, don´t you think? – Rober Jul 21 '17 at 16:21
4

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.

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.

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

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.

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

Also, as @musicformelons pointed out in comments, lazyload class needs to be applied via ng-class. Applying it directly in markup makes Lazysizes instantiate too early, before Angular parses the urls, resulting in urls containing mustache notation (which obviously won't work).

tao
  • 82,996
  • 16
  • 114
  • 150
  • You might need to use `ng-class`, [see here for example.](https://plnkr.co/edit/Nx7U7d4hyERZhSNNt0qV?p=preview&preview) – musicformellons Feb 12 '21 at 11:31
  • @Why do you think I might need use `ng-class`, @music? The plunker you linked also uses `class="lazyload"` on the `` tags. – tao Feb 12 '21 at 12:13
  • You're right, but the plunker only starts working when you change `class` it into `ng-class`. – musicformellons Feb 12 '21 at 15:45
  • [here](https://github.com/aFarkas/lazysizes/issues/290) is explanation: "This way lazysizes waits until angular has changed the url placeholder." – musicformellons Feb 12 '21 at 15:48
  • I don't quite get your explanation, but you might be right that my example is not relevant... it uses `src` and it seems that's why the pictures don't show. They do show when using `ng-class="lazyload"`. In your answer you're using `ng-src`, which makes my remark probably also irrelevant. – musicformellons Feb 12 '21 at 16:45
  • Ok, how do you know for sure they are not loaded lazily btw? – musicformellons Feb 12 '21 at 19:53
  • Updated the answer. Applying `class="lazyload"` causes LazySizes to instatiate before angular parses the urls. – tao Feb 15 '21 at 04:17
2

first thing you can do is compress your images:

png:

http://compresspng.com/it/

if you need it use the jpeg alternative 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/

Fausto
  • 183
  • 12