No puedo hacer que mis imágenes se carguen de forma diferida con JavaScript. Por alguna razón, las imágenes simplemente no aparecen cuando cambio el html de src a data-src. Luego, cuando utilizo un intersecciónObserver para cargar imágenes de forma diferida, no puedo mostrar ninguna imagen en la página. Adjunto está mi código html, css y JS;
html: <div class="photo__container photo__container--one"> <img data-src="portrait/1-vertical.jpeg" alt="" class="fade-in-img img-vertical-lazy" /> <img data-src="portrait/2-vertical.jpeg" alt="" class="fade-in-img img-vertical-lazy" /> <img data-src="portrait/3-vertical.jpeg" alt="" class="fade-in-img img-vertical-lazy" /> </div> CSS: .img-vertical-lazy { height: 70rem; width: auto; } JS: const lazyImages = document.querySelectorAll('.img-vertical-lazy'); const appearLazy = { threshold: 0.1 }; const lazyLoading = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting) return; entry.target.src = entry.target.getAttribute('data-src'); lazyLoading.unobserve(entry.target); }); }, appearLazy); lazyImages.forEach(image => lazyLoading.observe(image));Hay varias formas de hacerlo, pero depende de su propósito de usar la carga diferida. En la mayoría de los casos, es para SEO (es decir, para cargar rápidamente la página). Si le da pereza cargar imágenes solo para obtener una puntuación de velocidad de página rápida, puede agregar este código a su página.
Aquí hay un ejemplo de trabajo:
Se cargará una imagen cuando se desplace dentro de div.
<html> <body> <div id="mydiv" style="width:500px;height:300px;overflow:scroll;"> <h1>Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced</h1> <div class="photo"> <img data-src="https://images.freeimages.com/images/small-previews/648/bs-04-1255720.jpg"/> </div> <h2>Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.</h2> </div> <script> var sw = 0; document.getElementById('mydiv').onscroll=function(){ if(sw==0){ sw=1; const lazyImages = document.querySelectorAll('img'); for (let i = 0; i < lazyImages.length; i++) { lazyImages[i].src = lazyImages[i].getAttribute('data-src'); } } } </script> </body> </html> Consejo: use window.onscroll para aplicar el efecto en toda la página web