JS 使用IntersectionObserver实现图片懒加载

客官们先看下是不是你们想要的效果 (*^_^*)

效果:


实现代码:

HTML:

html 复制代码
<div class="container">
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
  <div class="block">
    <img data-src="https://picsum.photos/200/200" alt="">
  </div>
</div>

CSS:

css 复制代码
.block {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  box-sizing: border-box;
  margin: 20px auto;
}

.block img {
  width: 100%;
  height: 100%;
}

JavaScript:

javascript 复制代码
// 创建一个intersection observer实例
	const observer = new IntersectionObserver(entries => {
	  entries.forEach((entry, index) => {
	    console.log(entry);
	    const img = entry.target;
	    // 放一张本地图片
	    img.src = './img/1.png';
	    if (entry.isIntersecting) {
	      console.log(index, '进入可视区域');
	      // 模拟加载慢情况
	      setTimeout(() => {
	        // 加载图片   
	        img.src = img.dataset.src;
	        img.onload = () => {
	          console.log('图片加载完成');
	          observer.unobserve(img);
	        };
	      }, 1000);
	    }
	    // else {
	    //   console.log(index, '离开可视区域');
	    // }
	  });
	});
	
	// 观察目标节点
	const blockEls = document.querySelectorAll('.block img');
	
	// 配置观察选项
	const config = {
	  root: document.querySelector('.container'),
	  rootMargin: '0px',
	  threshold: 1
	};
	
	
	blockEls.forEach(blockEl => {
	  // 观察目标节点
	  observer.observe(blockEl, config);
	});
相关推荐
CodeCraft Studio2 小时前
PPT处理控件Aspose.Slides教程:在 C# 中将 PPTX 转换为 Markdown
开发语言·c#·powerpoint·markdown·ppt·aspose·ai大模型
萧鼎3 小时前
深入理解 Python Scapy 库:网络安全与协议分析的瑞士军刀
开发语言·python·web安全
阿拉丁的梦5 小时前
教程1:用vscode->ptvsd-创建和调试一个UI(python)-转载官方翻译(有修正)
开发语言·python
木宇(记得热爱生活)6 小时前
一键搭建开发环境:制作bash shell脚本
开发语言·bash
睡美人的小仙女1276 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
Cisyam^6 小时前
Go环境搭建实战:告别Java环境配置的复杂
java·开发语言·golang
大宝贱6 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
IAR Systems7 小时前
在IAR Embedded Workbench for Arm中实现Infineon TRAVEO™ T2G安全调试
开发语言·arm开发·安全·嵌入式软件开发·iar
jayzhang_7 小时前
SPARK入门
大数据·开发语言
蹦极的考拉7 小时前
网站日志里面老是出现{pboot:if((\x22file_put_co\x22.\x22ntents\x22)(\x22temp.php\x22.....
android·开发语言·php