图片懒加载方案

方案1：监听滚动事件

* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.box {height: 100%;overflow-y: auto;}.ele1 {height: 1200px;width: 100%;background-color: goldenrod;}.ele2 {height: 300px;width: 100%;margin-top: 20px;background-color: skyblue;}

目标元素距离顶部的距离 < 可视区域；就说明需要加载图片

Element.getBoundingClientRect() 方法可以返回一个对象，其提供了元素的大小及其相对于视口的位置

{ bottom: 1441; height: 300; left: 0; right: 965; top: 1141; width: 965; x: 0; y: 1141 }

其中 width 和 height属性是包含了 padding 和 border-width

const lazyImgs = document.querySelectorAll(".lazy-img");const screenHeight = window.innerHeight;document.querySelector(".box").addEventListener("scroll", () => {lazyImgs.forEach((img) => {if (img.getBoundingClientRect().top < screenHeight) {const dataSrc = img.getAttribute("data-src");const isLoading = img.getAttribute("src");!isLoading && img.setAttribute("src", dataSrc);}});});

方案2：Object.IntersectionObserver

语法：创建一个observer观察实例，可以使用observe方法观察具体的dom

const observer=new IntersectionObserver(callback，option)

callback函数

目标元素刚好被看到、刚好消失是都会触发 callback 回调

entries是一个数组，数组中是被观察的dom信息

（entries）=> {}

option

观察dom节点和取消观察

observer.observe(DOM节点)observer.unobserve(DOM节点)

具体实现

const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {// 如果图片进入可视区域，设置src属性获取图片资源if (entry.isIntersecting) {// const img = entry.target;// const dataSrc = img.getAttribute("data-src");// img.setAttribute("src", dataSrc);entry.target.src = entry.target.dataset.src;observer.unobserve(entry.target); // 获取后取消对该图片的观察}});});const lazyImgs = document.querySelectorAll(".lazy-img");// 观察所有图片lazyImgs.forEach((img) => {observer.observe(img);});