AppDrag Support Center

Lazyload your Generated Content

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 or the url of the background image in the attribute "data-src"
2 - Use "//" 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.

Other articles

Need More Help?


If we've been asked before, it's in our Frequently Asked Questions!

Open FAQ


Chat directly with the AppDrag team!

Open WebChat

Certified Partners

Not enough time to build your site? Find a Certified Partner to help you!

More Info