Lazy loading – rootMargin

19. 9. 2018 23:13:20

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/fundamentals/performance/lazy-loading-guidance/images-and-video/

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.

19. 9. 2018 23:13:20

https://webtrh.cz/diskuse/lazy-loading-rootmargin#reply1366230

Michal Jeřábek

20. 9. 2018 08:54:45

Musíte "zvětšit" okno prohlížeče o 150px nahoře a dole:

20. 9. 2018 08:54:45

https://webtrh.cz/diskuse/lazy-loading-rootmargin#reply1366229

StepanP

(12 hodnocení)

20. 9. 2018 13:04:55

Napsal mjerabek;1485929
Musíte "zvětšit" okno prohlížeče o 150px nahoře a dole:
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!

20. 9. 2018 13:04:55

https://webtrh.cz/diskuse/lazy-loading-rootmargin#reply1366228

Pro odpověď se přihlašte.

Přihlásit