js观察者

最新推荐文章于 2024-05-21 14:15:14 发布

欧阳天风

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量508

点赞数 12

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/a22055/article/details/134913159

版权

前言

大家在开发过程中，经常会遇到需要页面图片懒加载来优化，常规需要监听页面滚动来计算，此方式及其麻烦，下面则是相对比较简单的方式。

提示：以下是本篇文章正文内容，下面案例可供参考

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	
</head>
<body>
<div id="box">
	<img src="./img/noface.jpg" data-src='./img/1.avif'>
	<img src="./img/noface.jpg" data-src='./img/2.avif'>
	<img src="./img/noface.jpg" data-src='./img/3.avif'>
	<img src="./img/noface.jpg" data-src='./img/4.avif'>
	<img src="./img/noface.jpg" data-src='./img/5.avif'>
	<img src="./img/noface.jpg" data-src='./img/1.avif'>
	<img src="./img/noface.jpg" data-src='./img/2.avif'>
	<img src="./img/noface.jpg" data-src='./img/3.avif'>
	<img src="./img/noface.jpg" data-src='./img/4.avif'>
	<img src="./img/noface.jpg" data-src='./img/5.avif'>
	<img src="./img/noface.jpg" data-src='./img/1.avif'>
	<img src="./img/noface.jpg" data-src='./img/2.avif'>
	<img src="./img/noface.jpg" data-src='./img/3.avif'>
	<img src="./img/noface.jpg" data-src='./img/4.avif'>
	<img src="./img/noface.jpg" data-src='./img/5.avif'>
	<img src="./img/noface.jpg" data-src='./img/1.avif'>
	<img src="./img/noface.jpg" data-src='./img/2.avif'>
	<img src="./img/noface.jpg" data-src='./img/3.avif'>
	<img src="./img/noface.jpg" data-src='./img/4.avif'>
	<img src="./img/noface.jpg" data-src='./img/5.avif'>
	<img src="./img/noface.jpg" data-src='./img/1.avif'>
	<img src="./img/noface.jpg" data-src='./img/2.avif'>
	<img src="./img/noface.jpg" data-src='./img/3.avif'>
	<img src="./img/noface.jpg" data-src='./img/4.avif'>
	<img src="./img/noface.jpg" data-src='./img/5.avif'>
</div>
<style type="text/css">
		*{margin: 0;padding: 0}
	/*	img {
			width: 150px;
			height: 150px;
		}*/

		div	 {
			margin-left: 50%;
			height: 300px;
			overflow: auto;
			width: 300px;
		}
	</style>
<script type="text/javascript">
	window.addEventListener('load', () => {
		let box = document.getElementById('box')
	const observe = new IntersectionObserver((nums) => {
			nums.forEach(item => {
				console.log(item.isIntersecting)
				// item.isIntersecting 为true代表已交叉
				if(item.isIntersecting) {
					item.target.src = item.target.dataset.src
					// 取消监听
					observe.unobserve(item.target)
				}
			})
	},{
		root:box,//默认窗口
		rootMargin:'0px',//向外扩展
		threshold:1 //交叉比例 0-1
	})

	const imgs = document.querySelectorAll('img[data-src]')
	imgs.forEach(item => {
		// 监听每个img
		observe.observe(item)
	})
	});
	

</script>
</body>
</html>

使用上述观察者模式可以轻松处理图片懒加载的问题