React Lazy Load Image IntersectionObserver

La carga de imágenes a medida que desplaza el scroll es muy sencillo de implementar. Dejamos un ejemplo genérico en Javascript y cómo implementarlo fácilmente en las páginas creadas con NwProject, admite IntersectionObserver.

Nwproject:

<img class="lzy_img" data-src="img_5.jpg" />

Debes poner la clase lzy_img.

En data-src la ruta de la imagen.

El resto lo hace la librería.

Si es una imagen con background-image, este es el ejemplo:

 <div class="lzy_img_two" data-src="https://www.reddearboles.com/imagenes/home_img1.jpg" data-bg="true" style="height: 500px;" >
               Hola mundo
   </div>

Es igual que el anterior, solo que debes ponerle el atributo data-bg="true".

Demo: https://www.gruponw.com/nwlib6/nwproject/modules/examplesNwMaker/images.html

Javascript (ya lo incluye la librería Nwproject):

 document.addEventListener("DOMContentLoaded", function () {
                loadAllImagesLazy('lzy_img');
            });
            function loadAllImagesLazy(classImages) {
                 var imageObserver = new IntersectionObserver((entries, imgObserver) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        var lazyImage = entry.target;
                        var data_bg = lazyImage.getAttribute("data-bg");
                        var data_src = lazyImage.getAttribute("data-src");
                        if(data_bg === "true") {
                          lazyImage.style.backgroundImage = "url(" + data_src + ")";
                        } else {
                          lazyImage.src = lazyImage.dataset.src;
                        }
                        lazyImage.classList.remove(classImages);
                        imgObserver.unobserve(lazyImage);
                    }
                });
            });
                var arr = document.querySelectorAll("." + classImages);
                arr.forEach((v) => {
                    imageObserver.observe(v);
                });
            }