What is the command that can execute lazy load of image in HTL code AEM 6.5?

Question

I have to implement a javascript to the components for the lazy load of images in a site in AEM 6.5. How do I change.

I have created dailog for component and implemented javascript in clintlibs in AEM 6.5. What do I change in HTL code for the lazyload of image ?.

Answer 1

The AEM Core WCM Components already have support for lazy loading of images:

• for Image (v3) using native browser capabilities, example markup

<img ... loading="${image.lazyEnabled ? 'lazy' : ''}" ...

• for Image (v2) through JavaScript, example markup and JS code

<div ...
    data-cmp-lazy="${image.lazyEnabled}"
    data-cmp-lazythreshold="${image.lazyThreshold}"
    ...

update = function() {
    if (that._properties.lazy) {
        if (isLazyVisible()) {
           loadImage();
        }
    } else {
        loadImage();
    }
};