Lazy loading images with knockout

[PierreLeMaguer]

Hi,

I'm on magento 2.3 opensource. I try to apply the lazyloading for images define into js knockout template.

<img data-bind="attr: {src: thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/>

First, I find that the lazyloading does not work. It's because the module does not manage it. So, try the following to have the lazyloading :

<img data-bind="attr: {src: $parent.getPixelUrl(), 'data-original': thumbnail, alt: code_article, loading: 'lazy', width: '165', height: '165' }"/> where the getPixelUrl returns the same string than $block->getViewFileUrl('Magefan_LazyLoad::images/pixel.jpg')

It does not work again. Anybody has an idea ?

Thanks

[ihorvansach]

@PierreLeMaguer , I think it does not work as the lazyload init js executed before the element was rendered.

What you should try to do is to call new LazyLoad() once the element was rendered. Make sure that when the element has src and data-original LazyLoad is initialized also.

Source code: https://github.com/magefan/module-lazyload/blob/master/view/frontend/templates/lazy.phtml

[PierreLeMaguer]

@ihorvansach , I succeeded by editing the template with with the src and the data-original properties. I used the knockout event 'afterRender' to call new LazyLoad(). It works well. I wonder if something can be done in a generic way to have this feature without forcing the developer to edit its template (by adding the data-original property) ? As it's done on the backend side in PHP. I think it could be good. Otherwise, at least, specify in the documentation of this module which js library is used for the lazy loading and show a link to its documentation.

[ihorvansach]

@PierreLeMaguer, can you please send us (email: support@magefan.com) file that you have changed? We will take a look and try to include this code in the next version of the extension.

[PierreLeMaguer]

@ihorvansach , I send you files. But well, they're custom files. I don't know if they will be useful to find a generic solution to this issue.

[magefan]

@PierreLeMaguer , we have created and article about this https://magefan.com/magento-2-image-lazy-load-extension/knockout-template

Thank you