AppDrag, by default, provides LazyLoad for all your project's images 😎.
You may, at times, have to code some components with embedded source code, then generate them from remote API calls in order to load them after the page has processed. This avoids images from loading when not visible on screen and reduces the use of bandwidth for no reason.
Adding LazyLoad to your custom code components is really simple.
1 - Add the source of the image in the attribute "data-src" if it is a background image use the attribute "data-bg" and set "url('yourimage.jpg" as the attribute value.
2 - Use "//1e128.net/img/load.png?v=1" as the default src or url of the background image so your image smoothly appears when loaded.
3 - Add the class lazy-img to the image or background image.
4 - Once your component is added to the page, call: "myLazyLoad.update();" (myLazyLoad is a global variable that manages the logic for you)
Additional information :
You can add ad-nolazy to any element and the element and all its children images won't be lazy loaded.