Prodej projektů Duchod.cz, Duchodova-Reforma.cz a doména MojeFinance.cz
Zobrazují se odpovědi 1 až 3 z 3

Lazy loading - rootMargin

  1. Ahoj,

    neví někdo, kam přesně zařadit rootMargin, aby se mi obrázky s lazy loading efektem zobrazovaly třeba o 150 px dříve, než se k nim dostanu scrollem? Už jsem vyzkoušel tak 10 variant, ale stále nic. :/

    Je to popsáno i zde: https://developers.google.com/web/fu...ges-and-video/

    Kód:
    <script>
    	document.addEventListener("DOMContentLoaded", function() {
      let lazyImages = [].slice.call(document.querySelectorAll(".lazy"));
      let active = false;
    
      const lazyLoad = function() {
        if (active === false) {
          active = true;
    
          setTimeout(function() {
            lazyImages.forEach(function(lazyImage) {
              if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                lazyImage.src = lazyImage.dataset.src;
                lazyImage.srcset = lazyImage.dataset.srcset;
                lazyImage.classList.remove("lazy");
    
                lazyImages = lazyImages.filter(function(image) {
                  return image !== lazyImage;
                });
    
                if (lazyImages.length === 0) {
                  document.removeEventListener("scroll", lazyLoad);
                  window.removeEventListener("resize", lazyLoad);
                  window.removeEventListener("orientationchange", lazyLoad);
                }
              }
            });
    
            active = false;
          }, 200);
        }
      };
    
      document.addEventListener("scroll", lazyLoad);
      window.addEventListener("resize", lazyLoad);
      window.addEventListener("orientationchange", lazyLoad);
    });
    </script>
    Mockrát díky!

    Štěpán P.

  2. Co se právě děje na Webtrhu?
  3. Musíte "zvětšit" okno prohlížeče o 150px nahoře a dole:

    Kód:
    var ROOT_MARGIN = 150;
    
    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight + ROOT_MARGIN && lazyImage.getBoundingClientRect().bottom >= -ROOT_MARGIN) && getComputedStyle(lazyImage).display !== "none") {
    
    }

  4. Citace Původně odeslal mjerabek Zobrazit příspěvek
    Musíte "zvětšit" okno prohlížeče o 150px nahoře a dole:

    Kód:
    var ROOT_MARGIN = 150;
    
    if ((lazyImage.getBoundingClientRect().top <= window.innerHeight + ROOT_MARGIN && lazyImage.getBoundingClientRect().bottom >= -ROOT_MARGIN) && getComputedStyle(lazyImage).display !== "none") {
    
    }
    Bezva, díky moc!

Hostujeme u Server powered by TELE3