使用IntersectionObserver接口进行图片懒加载

ゞ浴缸里的玫瑰 2021-11-02 06:48 234阅读 0赞

参考文章： [简书][Link 1]

文中图片来源： [http://www.acgjc.com][http_www.acgjc.com]

\[MDN\] IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

也就是说， 这是用来监听页面中模块可见区域的。

懒加载代码如下

let imgList = document.querySelectorAll('img'); // 获取页面中所有img对象
    
    let observer = new IntersectionObserver(entries => {
    	entries.forEach(entry => {
    		if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
    		    // intersectionRatio 表示相交区域和目标元素的比例值 
    		    // 也可以用sIntersecting 目标元素当前是否可见 Boolean值 可见为true
    			entry.target.src = entry.target.dataset.src
    			// 图片进入进入可见区域， 则赋予data-src值给src属性
    			observer.unobserve(entry.target)
    			// 图片已加载， 解除观察
    		}
    	})
    })
    imgList.forEach(img => {
    	observer.observe(img); // 观察没一个图片对象
    })

应用

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <style type="text/css">
    	.list {
    		width: 500px;
    		height: 300px;
    		margin: 20px;
    	}
    	.img {
    		width: 100%;
    		height: 300px;
    	}
    </style>
    <body>
    	<div>图片来源于http://www.acgjc.com</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/183dc2537018c3e8934c819251c72136-1024x576.jpg" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/90cfb81aebc76a0fad7d311800fdbff2-1024x576.jpg" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/3685ffdd022374d80d5a5b0a1830146c-1024x553.jpg" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/e62c330f09a9c86a6b3471850b22957b-1024x512.jpg" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2019/07/c374b5e14e5f36fc76ff6485782fd6d8-1-1024x473.jpg" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/7255d9b1da818860b351d67762b59029-1024x576.png" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/9d94d1b3710caafc47d956c9b78cb636-1024x768.jpg" class="img">
    	</div>
    	<div class="list">
    		<img data-src="http://img.acgjc.com/wp-content/uploads/2018/07/04f614a8a2c31c009dacfa04965474b4-1024x769.jpg" class="img">
    	</div>
    
    	<script type="text/javascript">
    		let imgList = document.querySelectorAll('.img')
    
    		let observer = new IntersectionObserver(entries => {
    			entries.forEach(entry => {
    				if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
    					entry.target.src = entry.target.dataset.src
    					observer.unobserve(entry.target)
    				}
    			})
    		})
    		imgList.forEach(img => {
    			observer.observe(img)
    		})
    	</script>
    </body>
    </html>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70][]

页面往下滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70 1][]

可以看见， 一开始， 页面中可见范围中有三张图片， 后台网络也是确实只有三次请求。随着页面往下滚动， 浏览器依次进行图片请求。且已加载的不会再请求。可见这样是符合懒加载的效果的。

[Link 1]: https://www.jianshu.com/p/84a86e41eb2b
[http_www.acgjc.com]: http://www.acgjc.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70]: /images/20211102/147e586320fc4dd7ab3410d69e6d06eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXVuY3lXdQ_size_16_color_FFFFFF_t_70 1]: /images/20211102/ffd7913c7e7e437bad8fd8968dabb686.png