No funciona lazyLoad en Internet Explorer

No funciona lazyLoad en Internet Explorer. Muchas cosas no funcionan, incluyendo al infame navegador mismo. Y hasta Microsoft mismo lo ha discontinuado en favor de Edge, aunque tampoco es que sea muy popular... el asunto que es que aún hay un porcentaje aunque ínfimo de personas que lo utilizan, aún no se el motivo.

El caso es que si tienes un sitio con la técnica de lazyLoad pues simplemente no funciona, así que con un ajuste tendríamos que cargar las imágenes directo, aunque sea más pesado para el navegador. Dejo aquí la función ejemplo:

//lazy load
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 {
      // Internet Explorer 
      lazyloadImages = document.querySelectorAll(".lazy");
      $.each(lazyloadImages,function(i,item) {
         $(item).attr('src', $(item).attr('data-src') );
      });
   }
});

Las imágenes pues serían igual, img class="lazy" alt="imagen" data-src="url_imagen" , de hecho ahorita lo que hace es algo tan simple como buscar todas las imágenes y cambiar su atributo src por data-src, aunque si no tiene no comprueba nada pero por lo menos se ve el contenido.

Seguramente hay soluciones más acordes, pero de entrada funciona.

+ fotos / videos

Almacenado en javascript, Desarrollo Web