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);
	});
相关推荐
Dread_lxy10 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
娅娅梨16 分钟前
C++ 错题本--not found for architecture x86_64 问题
开发语言·c++
汤米粥22 分钟前
小皮PHP连接数据库提示could not find driver
开发语言·php
冰淇淋烤布蕾25 分钟前
EasyExcel使用
java·开发语言·excel
拾荒的小海螺31 分钟前
JAVA:探索 EasyExcel 的技术指南
java·开发语言
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
马剑威(威哥爱编程)1 小时前
哇喔!20种单例模式的实现与变异总结
java·开发语言·单例模式
白-胖-子1 小时前
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-统计数字
开发语言·c++·算法·蓝桥杯·等考·13级
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
好睡凯1 小时前
c++写一个死锁并且自己解锁
开发语言·c++·算法