Tengo un proyecto MVC en el que intento implementar la carga diferida en imágenes que no aparecen en la parte superior (o están a la vista) en el navegador cuando, por ejemplo, se carga la página de inicio. Luego, a medida que se desplaza hacia abajo, las imágenes se cargarán.

Hasta ahora, he agregado este script a mi vista maestra para manejar la carga diferida de las imágenes:

 <script> document.addEventListener("DOMContentLoaded", function () { var lazyloadImages; if ("IntersectionObserver" in window) { lazyloadImages = document.querySelectorAll(".lazy"); var imageObserver = new IntersectionObserver(function (entries, observer) { entries.forEach(function (entry) { if (entry.isIntersecting) { var image = entry.target; image.src = image.dataset.src; image.classList.remove("lazy"); imageObserver.unobserve(image); } }); }); lazyloadImages.forEach(function (image) { imageObserver.observe(image); }); } else { var lazyloadThrottleTimeout; lazyloadImages = document.querySelectorAll(".lazy"); function lazyload() { if (lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function () { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function (img) { if (img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if (lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); } }) </script>

El marcado de la imagen es el código:

 <img data-src="~/Images/Icons/PinkArrow.png" class="lazy module-AEM2020-switching-img-pink-arrow-2" alt="">

En función de que la clase sea perezosa y que src se haya cambiado a data-src, debería cargar la imagen a medida que se desplaza hacia abajo hasta ese elemento.

Sin embargo, la imagen no se carga y no estoy seguro de qué acción tomar a continuación. ¿Me he perdido otra referencia o mi script no está en el lugar correcto?

Esto se toma de la depuración del navegador.