IntersectionObserver
它可以用来自动监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断,被
称为"交叉观察器"
实现步骤
1、先把图片放置可视区域外
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>4</li>
......
<li>5
<img id='app' alt="">
</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
2、获取DOM
var img = document.getElementById('app')
3、实例化 IntersectionObserver
// 参数是一个回调函数 (arr) =>{ }
var observer = new IntersectionObserver(参数)
IntersectionObserver的回调函数里的arr是一个数组,数据如下:
主要是用到intersectionRatio和isIntersectionRatio,常在 if 语句做判断
intersectionRatio: 是否进入可视区(和 rootMargin 有关联) 返回值是一个布尔值
isIntersectionRatio:返回目标元素出现在可视区的比例
4、调用函数,开始监听
observer.observe(img)
所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
......(多来点 li )
<li>5
<img id='app' alt="">
</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// 获取DOM
var img = document.getElementById('app')
// 实例化 IntersectionObserver
var observer = new IntersectionObserver(arr => {
// 是否进入 返回值是一个布尔值
console.log(arr[0].isIntersecting)
// 返回目标元素出现在可视区的比例
console.log(arr[0].isIntersectionRatio)
// 图片进入可视区域内(注意 rootMargin 的值)
if (arr[0].isIntersecting) {
img.src = '要展示的图片'
// 图片加载错误的回调(优化用户体验)
img.onorrer = function () {
console.log('图片加载失败')
img.src = '默认图片地址'
}
// 图片加载后的回调
img.onload = function () {
console.log('图片加载完毕');
}
// 不再监听 只监听一次
observer.unobserve(img)
}
// rootMargin 提前 100px 来发请求获取图片,因为发请求也是需要时间的
}, { rootMargin: '100px' })
// 调用函数,开始监听
observer.observe(img)
</script>
</body>
</html>