代码之家 › 专栏 › 技术社区 › user984003

IntersectionObserver,立即加载图像,而不是延迟加载

intersection-observer lazy-loading

user984003 · 技术社区 · 3 年前

我试图使用IntersectionObserver延迟加载图像。但是,在通过滚动进入视口之前,所有图像都会立即加载。我之所以知道这一点,是因为在向下滚动之前,我会查看“网络”选项卡和“检查器”,看看它们在哪里。

我在Windows Chrome中尝试过。

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

0 回复 | 直到 3 年前

user984003 3 年前

我必须检查入口。 https://jsfiddle.net/81w79sg3/

我还将rootMargin设置为100px,这使得图像在滚动到视图之前加载。Rootmargin在jsfidle中不起作用(关于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) });

推荐文章

M'sieur Toph' · Angular 5-在组件内部获取懒散加载的模块根路径

6 年前

gooamoko · 我可以用lazy init使用RmiServiceExporter吗?

6 年前

livthomas · 如何在Angular应用程序中延迟加载库

6 年前

Sameer · 为延迟加载的模块创建公共模块

6 年前

Mohammad Shadmehr · 为什么我必须在Linq查询中包含其他实体?

6 年前

Anika · 调用onCellEdit时,DataTable的RowKey为null

6 年前

Philip Feldmann · 帆。js延迟加载模型

6 年前

Perp · 如何将Web包中的节点模块与异步块分离?

6 年前

Bob Ramsey · 需要关于延迟加载mat手风琴内容的帮助

6 年前

JSON · 如何将子组件设置为路由器出口的默认路由?[副本]

6 年前