Estoy usando el observador de intersección para imágenes de carga tardía. ¿Cómo puedo cargar todas las imágenes en navegadores que no admiten el observador de intersecciones?
mi guion=
const imob = new IntersectionObserver((entries, self) => { entries.forEach(entry => { if (entry.isIntersecting) { llo(entry.target); self.unobserve(entry.target); } }); }); document.querySelectorAll('.lzyp').forEach((pcu) => { imob.observe(pcu); }); const llo = (pcu) => { const img = pcu.querySelector('img'); const sce = pcu.querySelectorAll('source'); sce.forEach((sue) => { sue.srcset = sue.dataset.srcset; sue.removeAttribute('data-srcset'); }); img.src = img.dataset.src; img.removeAttribute('data-src'); }¿Quizás un polyfill para IntersectionObserver ?
Agregar código de respaldo si IntersectionObserver no es compatible.
if (!('IntersectionObserver' in window) || !('IntersectionObserverEntry' in window) || !('intersectionRatio' in window.IntersectionObserverEntry.prototype) || !('isIntersecting' in window.IntersectionObserverEntry.prototype) ) { // load all images here document.querySelectorAll('.lzyp').forEach( llo ); }La función Resolver flecha no es compatible con IE:
// change from this document.querySelectorAll('.lzyp').forEach((pcu) => { imob.observe(pcu); }); // to this document.querySelectorAll('.lzyp').forEach( function(pcu) { imob.observe(pcu); });juntar:
function llo(pcu) { const img = pcu.querySelector('img'); const sce = pcu.querySelectorAll('source'); sce.forEach((sue) => { sue.srcset = sue.dataset.srcset; sue.removeAttribute('data-srcset'); }); img.src = img.dataset.src; img.removeAttribute('data-src'); } // IntersectionObserver is not supported if (!('IntersectionObserver' in window) || !('IntersectionObserverEntry' in window) || !('intersectionRatio' in window.IntersectionObserverEntry.prototype) || !('isIntersecting' in window.IntersectionObserverEntry.prototype) ) { // load all images here document.querySelectorAll('.lzyp').forEach( llo ); } else { const imob = new IntersectionObserver( function(entries, self) { entries.forEach( function(entry) { if (entry.isIntersecting) { llo(entry.target); self.unobserve(entry.target); } }); }); document.querySelectorAll('.lzyp').forEach(function(pcu) { imob.observe(pcu); }); }