• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

165
Vistas
Lazy Cargando imágenes en MVC

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.

ingrese la descripción de la imagen aquí

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda