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);
	});
相关推荐
寒笙LED14 分钟前
C++详细笔记(六)string库
开发语言·c++·笔记
IT书架21 分钟前
golang面试题
开发语言·后端·golang
初遇你时动了情39 分钟前
uniapp 城市选择插件
开发语言·javascript·uni-app
zongzi_4942 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
kikyo哎哟喂2 小时前
Java 代理模式详解
java·开发语言·代理模式
麻辣_水煮鱼2 小时前
vue数据变化但页面不变
前端·javascript·vue.js
duration~2 小时前
SpringAOP模拟实现
java·开发语言
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
就爱六点起2 小时前
C/C++ 中的类型转换方式
c语言·开发语言·c++
我明天再来学Web渗透2 小时前
【SQL50】day 2
开发语言·数据结构·leetcode·面试