Lazy

bonjour
j'ai mis un lazy download dans une page
avec un data-src pour la bonne image et un src sur une image floue

ca fonctionne impec, mais je voudrais ajouter une transition de 0.3 ou 0.4 sec
je place quoi et ou dans le js ?
merci

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);
        }
      });
    }, {

      root: document.querySelector("#container"),
      rootMargin: "0px 0px -200px 0px"
    });


    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);
  }
})

Modifié par Felipe (06 Mar 2020 - 12:36)

Salut,
J'allais dire qu'il me semblait que ça faisait une petite année que c'était devenu du html natif l'attribut pour faire lazy load, mais en fait c'est pas encore parfaitement supporté : https://caniuse.com/#feat=loading-lazy-attr

Tu dois pouvoir faire une transition en css en jouant sur l'opacité de ton image flou et de celle qui la remplace.
Modifié par Mathieuu (05 Mar 2020 - 13:56)