IntersectionObserver根据MDN的解析是这样的
IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。
当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
我的理解就是这个观察者对象可以观察文档可视区域内给定的对象的变化情况
使用observe方法可以传入指定的元素[被监听对象]
使用unobserve方法可以取消对其的监听
代码:
let images = document.querySelectorAll('img');
//一旦观察到到达某个对象出现在可视区域就加载图片
let intersecfun = entries =>{
entries.forEach( entry =>{
if(entry.isIntersecting){
let imgobj = entry.target;
let imgsrc = imgobj.getAttribute("data-src");
imgobj.setAttribute("src",imgsrc);
observer.unobserve(imgobj);
}
});
};
//new观察者对象
let observer = new IntersectionObserver(intersecfun);
//为文档中所有图片被观察
images.forEach(image=>{
observer.observe(image);
})
entries的结构:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片</p>
<p>图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片</p>
<!-- 或者更多的p -->
<img data-src="https://images.pexels.com/photos/957024/forest-trees-perspective-bright-957024.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/131723/pexels-photo-131723.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p>图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片</p>
<p>图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片</p>
<script src="imglazyload.js" type="text/javascript"></script>
</body>
</html>
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
