时间戳

首页 > 解决方案 > IntersectionObserver，立即加载图像而不是延迟加载

lazy-loading - IntersectionObserver，立即加载图像而不是延迟加载

问题描述

我正在尝试使用 IntersectionObserver 延迟加载图像。但是，所有图像都会在它们通过滚动进入视口之前立即加载。我知道这一点是因为我在向下滚动之前查看了 Network 选项卡和 Inspector 以查看它们的位置。

我已经在 Windows Chrome 中尝试过这个。

https://jsfiddle.net/Ln4gv7mw/

HTML：

<img src="placeholder.png" data-src="image1">
<img src="placeholder.png" data-src="image2">
<img src="placeholder.png" data-src="image3">

JAVASCRIPT

let observer = new IntersectionObserver(
(entries, observer) => { 
entries.forEach(entry => {
    /* Placeholder replacement */
    entry.target.src = entry.target.dataset.src;
    observer.unobserve(entry.target);
  });
}, 
{rootMargin: "0px 0px 0px 0px"});

document.querySelectorAll('img').forEach(img => { observer.observe(img) });

标签： lazy-loadingintersection-observer

解决方案

我必须检查 entry.isIntersecting。https://jsfiddle.net/81w79sg3/

我还将 rootMargin 设置为 100px，这使得图像在滚动到视图之前加载。Rootmargin 在 jsfiddle 中不起作用（关于 iframe，但适用于真实页面）

let observer = new IntersectionObserver(
(entries, observer) => { 
entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('img').forEach(img => { observer.observe(img) });

推荐阅读