search

cloudinary / cloudinary_angular

Cloudinary Angular client library
MIT License
305 stars 228 forks source link

Chrome 77 support for lazy loading not possible with cl-image #233

Closed bjornharvold closed 4 years ago

bjornharvold commented 4 years ago

Hi,

Now that Chrome 77 is out, I wanted to add lazy loading to all our Cloudinary images.

I am trying to do something like this:

<cl-image style="max-width: 100%;"
                [public-id]="featuredImage"
                default_image="noimage.png"
                gravity="auto"
                loading="lazy"
                height="533"
                width="800"
                (onLoad)="onImageLoad()"
                (onError)="onImageError()"
                secure="true" class="img-fluid">

cl-image correctly applies loading="lazy". However, it loads the image immediately regardless. By the looks of it, the loading is not under the control of the img element but the cl-image element.

Please advise, Bjorn

roeeba commented 4 years ago

Hi @bjornharvold. The feature you are looking for is not supported yet. However, We went ahead and opened a feature request on your behalf and forwarded it to our Product Team to further analyze. At this point in time, we cannot guarantee if and when this will be implemented, but once we have any updates available, we’ll make sure to share it with you. Thank you for your understanding and patience in this matter.

bjornharvold commented 4 years ago

Cheers

roeeba commented 4 years ago

Hi @bjornharvold, I wanted to update you that the lazy loading feature is ready and waiting for the release. If you'd like. you can clone it and see if it works for you - https://github.com/cloudinary/cloudinary_angular/tree/feature/lazy-load-directive.

Also, looking at your code above, using loading="lazy" on Chrome should work (we've managed to use it successfully on Chrome). If you want us to take a closer look at it, please share a webpage where we can test your implementation. Thanks!

bjornharvold commented 4 years ago

Well THAT just made my day! I'll wait for the released version. Cheers @roeeba!

roeeba commented 4 years ago

@bjornharvold The library was updated a couple of weeks ago, including the change.

bjornharvold commented 4 years ago

Thank you @roeeba. We have already implemented that on our side using your new version and will be deploying to production shortly.