js如何实现图片懒加载

图片懒加载是指在页面滚动时，仅加载当前可视区域内的图片，其他未进入可视区域的图片则在滚动时按需加载。这种技术通常应用在图片较多的网站和移动端，能够有效的提升页面加载速度和用户体验。

实现图片懒加载的方式有很多种，以下是其中两种常见的方法：

1. 使用Intersection Observer API

Intersection Observer是现代浏览器提供的一种用于检测目标元素进入或离开可视区域的API。通过监听目标元素和可视区域的交叉情况，我们可以很容易地判断出目标元素是否进入或离开了可视区域，从而实现图片的懒加载。

具体实现步骤如下：

1）将需要进行懒加载的图片元素使用data-src属性存储图片地址；

2）使用Intersection Observer API监听图片元素和可视区域是否产生交叉；

3）当图片元素进入可视区域时，将data-src属性的值设置为img元素的src属性，即开始加载图片。

示例代码：

// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazy')

// 配置观察器
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target
      lazyImage.src = lazyImage.dataset.src
      observer.unobserve(lazyImage)
    }
  })
}, {
  root: null,
  threshold: 0
})

// 给所有图片元素添加观察器
lazyImages.forEach(lazyImage => {
  observer.observe(lazyImage)
})

2. 使用scroll事件和getBoundingClientRect方法

这种方式的原理是：通过监听页面的scroll事件，获取当前可视区域的顶部和底部位置，然后通过遍历页面上的图片元素，判断每个图片元素是否在当前可视区域内。如果在，则将图片的src属性设置为对应的图片地址，开始加载图片。

具体实现步骤如下：

1）将需要进行懒加载的图片元素使用data-src属性存储图片地址；

2）在页面滚动时，获取当前可视区域的顶部和底部位置；

3）遍历所有需要懒加载的图片元素，判断每个图片元素是否在当前可视区域内；

4）如果在可视区域内，则将data-src属性的值设置为img元素的src属性，即开始加载图片。

示例代码：

const lazyImages = document.querySelectorAll('.lazy')

function lazyLoad() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
  lazyImages.forEach(lazyImage => {
    if (lazyImage.offsetTop < (scrollTop + viewportHeight) && (lazyImage.offsetTop + lazyImage.offsetHeight) > scrollTop) {
      lazyImage.src = lazyImage.dataset.src
    }
  })
}

window.addEventListener('scroll', lazyLoad)

总结：

以上是两种常用的图片懒加载实现方式，通过使用Intersection Observer API和scroll事件以及getBoundingClientRect方法，我们能够很容易地实现图片的懒加载效果，从而提升页面加载速度和用户体验。当然，我们也可以结合其他技术实现更加优秀的图片懒加载方案。