He implementado este observador de intersección para que las imágenes se desvanezcan a medida que ingresan a la ventana gráfica. Sin embargo, cuando se vuelve a cargar la página, las imágenes aún se cargan inmediatamente aunque no estén en la ventana gráfica. ¿El observador de intersecciones tiene la capacidad de cargar estas imágenes de forma diferida?
JavaScript code: 'use strict'; const faders = document.querySelectorAll('.fade-in'); const appearOptions = { threshold: 0.4 }; const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) { entries.forEach(entry => { if (!entry.isIntersecting) return; else { entry.target.classList.add('appear'); appearOnScroll.unobserve(entry.target); } }) }, appearOptions); faders.forEach(fader => { appearOnScroll.observe(fader); })Puede establecer la fuente de la imagen real en un atributo de datos y volver a establecerlo en src cuando la imagen se cruza con la ventana gráfica.
Ejecute el siguiente fragmento y desplácese hacia abajo:
const img = document.querySelector('img'); const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting) return; entry.target.src = entry.target.getAttribute('data-src'); io.unobserve(entry.target); }) }); io.observe(img); .space { height: 100vh; } <div class="space"></div> <img alt="I'm lazy" data-src="https://images.dog.ceo/breeds/pug/n02110958_7255.jpg" />