Comments (5)
@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
from module-lazyload.
@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.
from module-lazyload.
@PierreLeMaguer, can you please send us (email: [email protected]) file that you have changed? We will take a look and try to include this code in the next version of the extension.
from module-lazyload.
@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.
from module-lazyload.
@PierreLeMaguer , we have created and article about this https://magefan.com/magento-2-image-lazy-load-extension/knockout-template
Thank you
from module-lazyload.
Related Issues (10)
- How to lazy load background images? HOT 3
- Enabling the module together with WebP renders no images HOT 3
- Images changing on hover HOT 2
- Lazyload Megamenu Images HOT 2
- Bug if there is no img tag src attribute HOT 1
- error when install with Magento 2.4.6 HOT 1
- [Solved] After x time, no image loading... HOT 1
- Missing required argument $skipBlocks of Magefan\\LazyLoad\\Plugin\\BlockPlugin. HOT 1
- No space between attributes HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from module-lazyload.