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);
	});
相关推荐
Python×CATIA工业智造1 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜2 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄2 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122463 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack4 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext4 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)5 小时前
后端快捷代码
java·开发语言