JavaScript图片懒加载的优化方法详解

这篇文章主要为大家详细介绍了JavaScript图片懒加载的优化方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

一、方法一

在这里插入图片描述

重点：

1.getBoundingClientRect().top > window.innerHeight 图片未出现

2.getBoundingClientRect().top

HTML：

 ...... 2222222222
2222222222
2222222222
2222222222
2222222222
2222222222
 /*先用data-自定义标签，使图片先不加载*/

JavaScript:

let img = document.querySelectorAll('img') window.addEventListener('scroll',() => { img.forEach((item) => { //若图片顶部高度小于视窗高度 if(item.getBoundingClientRect().top

我们可以看到，虽然图片懒加载已经成功了，但是scroll事件仍在不断触发，非常消耗资源，因此目前最推荐使用的方法还是IntersectionObserver

`二、方法二 InterSectionObserver`

重点：

1.observer.observe(DOM节点) 观察哪个DOM节点

2.observer.unobserve(DOM节点) 取消观察某DOM节点

3.callback目标能看见触发一次；目标元素看不见了又触发一次

HTML如上

JavaScript:

let img = document.querySelectorAll('img') //此回调：目标能看见触发一次；目标元素看不见了又触发一次 const callback = (entries) => {   //接收一个数组作为参数，数组每一项都和目标元素相关，比如		isIntersecting判断目标元素是否被观察到了，又比如target属性代表该目标元素 entries.forEach((item) => { //若该目标元素被观察到了 if(item.isIntersecting) { const img = item.target //目标元素 const data_src = img.getAttribute('data-src') img.setAttribute('src',data_src) observer.unobserve(img)  //observer.unobserve(DOM节点)  取消观察某DOM节点 } console.log('触发'); }) } const observer = new IntersectionObserver(callback) //遍历所有img，使得所有img被观察 img.forEach((item) => { observer.observe(item)  //observer.observe(DOM节点)  观察哪个DOM节点 })

思路：

new一个观察实例，并通过观察实例身上的observe属性观察每一个图片。定义callback回调函数，设置目标图片出现时改变属性