const imgs = document.getElementsByTagName('img')
const viewHeight = document.documentElement.clientHeight // 视图高度
let count = 0 // 计数器，表示当前更新了几个，也可以作为下一个要更新元素的下标
const noop = () => {} // 空函数

let lazyLaodWhtiThrottle = noop // 带有节流功能的懒加载，初始化

// 懒加载
const lazyLaod = () => {  
    if (count >= imgs.length) { // 加载完，移除事件
        window.removeEventListener('scroll', lazyLaodWhtiThrottle)
    }
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动距离

    // 判断每个图片是否在视图内
    // 是的话则加载真正的图片，count 加 1
    // 遍历超出视图底部的元素则跳出循环，没有必要再找下去
    // 如果图片没有 data-src， 则跳过，count 加 1
    for (let i = count; i < imgs.length; i ++) {
        const img = imgs[i]
        const dataSrc = img.getAttribute('data-src')
        // 视图以下元素在当前不再遍历
        if (img.offsetTop > scrollTop + viewHeight) {
            break
        }
        // 没有 data-src，不参与懒加载，程序应该跳过
        if (!dataSrc) {
            count ++
            continue
        }
        img.removeAttribute('data-src')
        img.src = dataSrc
        count ++
    }
}

// 使用节流
lazyLaodWhtiThrottle =  _.throttle(lazyLaod, 200)
window.addEventListener('scroll',lazyLaodWhtiThrottle)

lazyLaod() // 初始

代码解析

对照上面代码来讲：

count ，一个计数器，代表当前更新了 imgs 数组中多少个元素了。在我们的懒加载中，也会当做下一个要更新元素的下标传给 i。

javascript for (let i = count; i < imgs.length; i ++){ // ... }

其次，当 `count` 大于或者等于 `imgs` 的长度之后，说明所有元素都已经遍历过，则应该清除滚动事件。

在遍历元素上除了基于 count 的第一个元素下标的优化，也应该停止视图之下（可见区域后面）的元素的遍历，因为剩下的元素都是在视图之外，我们并不需要更新。

javascript if (img.offsetTop > scrollTop + viewHeight) { break }

不过因为我们总是从 count 开始遍历，因此上面两种情况中，前者就不存在了，我们只考虑后者。这个时候我们应该选择跳过，并且 count + 1。

除去上面的情况，我们默认剩下的就是正确有效的元素，执行更新算法，并移除元素的 data-src 属性， count + 1 。

javascript img.removeAttribute('data-src') img.src = dataSrc count ++

为了避免频繁触发 lazyLaod 函数，我们会选择添加节流功能。本章节使用的是 loadash，当然也可以自己实现一个。

效果

基于 `getBoundingClientRect` 实现懒加载

原理

使用 getBoundingClientRect 的原理和基于 offsetTop + clientHeight + scrollTop 的原理大同小异。主要不同的点在于，我们使用的是 getBoundingClientRect 方法来返回一个元素的位置信息，而并非上面例子中使用的滚动距离、可视区域高度以及偏移距离来进行计算。

getBoundingClientRect：返回一个元素的大小以及相对于视图窗口的位置，位置信息是相对于视图窗口的左上角来计算的。

图片来源： Element.getBoundingClientRect()

代码实现

const imgs = document.getElementsByTagName('img')
let count = 0 // 计数器，表示当前更新了几个，也可以作为下一个要更新元素的下标
const noop = () => {} // 空函数
let lazyLaodWhtiThrottle = noop // 带有节流功能的懒加载，初始化

const lazyLaod = () => {
    if (count >= imgs.length) {
        window.removeEventListener('scroll', lazyLaodWhtiThrottle)
    }
    for (let i = count; i < imgs.length; i ++) {
        const img = imgs[i]
        const dataSrc = img.getAttribute('data-src')

        // 获取相对于视图窗口顶部的距离
        const { top } = img.getBoundingClientRect()

        // 如果大于可视区域高度，说明在视图窗口之下，跳出
        if (top > document.documentElement.clientHeight) {
            break
        }
        // 不参与懒加载的元素， count + 1，进入下一个循环
        if (!dataSrc) {
            count ++
            continue
        }
        img.removeAttribute('data-src')
        img.src = dataSrc
        count ++
    }
}
lazyLaodWhtiThrottle = _.throttle(lazyLaod, 200)
window.addEventListener('scroll', lazyLaodWhtiThrottle)
lazyLaod()

代码解析

本例基本的逻辑和上一个方案几乎相同，都需要一个计算步骤来判断是否在视图之内。不同的是，本例中直接使用 getBoundingClientRect() 返回的位置信息，逻辑上更加的清晰。

const { top } = img.getBoundingClientRect()

// 如果大于可视区域高度，说明在视图窗口之下，跳出
if (top > document.documentElement.clientHeight) {
    break
}

事实上只需要 top 小于 document.documentElement.clientHeight，我们就可以认为元素正在可视区域内，并执行更新逻辑。

除此之外，其他逻辑大抵和上一个方案类似，具体可以参考上一个方案。

效果

基于 `Intersection Observer API` 实现懒加载

`Intersection Observer API`

首先引用 MDN 上的一句描述：

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档 viewport 的交集中的变化的方法。

一直以来，前端或多或少存在着一些视图窗口界内的检测以及图片懒加载的需求。长期以往，我们会使用前面两种位置计算类型的方式来实现我们想要的效果。

然而，我们的代码一般都会在主线程上运行，计算类型的方案显得不那么可靠，或多或少都会拉低整个网站的性能，造成一些不好的体验。尤其是在日益繁杂的功能面前，涉及到很多的广告、图片，可能每一个都有自己独立的交集检测，持续的滚动可能都会造成不可避免的方法调用，这在性能上多少会有影响，即便是采用各种优化手段达到一个相对较好的结果，代码逻辑也往往变得更为复杂。这个时候， Intersection Observer API 就应运而生了。

Intersection Observer API 会注册一个回调函数，当元素和另外一个元素（或者浏览器窗口）产生交集变化的时候，回调函数就会被执行。那么，回到我们的图片懒加载，我们完全可以使用这种方法来代替位置计算，提升网站的性能和体验。

tips： Intersection Observer API 尚未被浏览器全部支持，使用的时候需要注意浏览器的支持情况。

原理

使用 Intersection Observer API 实现图片懒加载，可以分为几步走：

代码实现

const imgs = document.getElementsByTagName('img')

function lazyLaod () {
    const observer = new IntersectionObserver(res => {
        for (let i = 0; i < res.length; i ++) {
            const currentChange = res[i]
            const { target } = currentChange
            const dataSrc = target.getAttribute('data-src')
            if (!currentChange.isIntersecting) continue
            if (!dataSrc) {
                observer.unobserve(target)
                continue
            }
            target.src = dataSrc
            target.removeAttribute('data-src')
            observer.unobserve(target)
        }
    });

    for (let i = 0; i < imgs.length; i ++) {
        observer.observe(imgs[i])
    }
}

lazyLaod()

代码解析

这里没有多么复杂的逻辑，主要的逻辑只有三个。

实例化一个 IntersectionObserver 实例，注册回调函数。

const observer = new IntersectionObserver(res => {...})

for 循环遍历所有图片，进行观察：

for (let i = 0; i < imgs.length; i ++) { 
      observer.observe(imgs[i])    
}

针对回调的结果集做判断和处理，最后记得要注销改元素的观察：

for (let i = 0; i < res.length; i ++) {
    const currentChange = res[i]
    const { target } = currentChange
    const dataSrc = target.getAttribute('data-src')
    if (!currentChange.isIntersecting) continue
    if (!dataSrc) {
        observer.unobserve(target) // 注销观察
        continue
    }
    target.src = dataSrc
    target.removeAttribute('data-src')
    observer.unobserve(target) // 注销观察
}

效果

基于 `img` 标签的 `loading` 属性实现懒加载

简述

前面讲的三种方案都是基于 javaScript 来进行元素位置判断，动态替换 src来实现图片懒加载的效果。那么，有没有一种办法可以更加干脆，而不用这么多逻辑判断，并且性能更佳。答案是，有的。它就是 img 标签上原生支持的属性 loading。

我们可以很方便的使用 loading="lazy" 的方式来实现一个图片懒加载的功能，并且不依赖我们的 javaScript，仅仅依靠原生支持以及浏览器的优化，性能上自然不必多说。

然而，非常遗憾的是，在 chrome 上，也在 75 版本之后才有支持，兼容性简直令人望而却步。因此，如果我们想要首先使用原生支持的 lazy-loading，依然需要配合 javaScript 做一个可用性判断，以决定当前程序要采用何种懒加载方式。

代码实现

这里我们可以采用两种方式，第一种就是丝毫不借助 javaScript，上来就是干，只需要在 img 标签上加上 loading="lazy" 即可。

<img src="https://xxxx/xxx.png" loading="lazy" />

简单明了，不用做过多的动作。

当然，因为兼容性的问题，我们也可以在 avaScript 中做一层判断，这样，我们可以采用前面几种方案相同 HTML 结构，依然给 img 标签赋予 src 和 data-src 两个资源。

const imgs = document.getElementsByTagName('img')

function lazyLaod () {  
    // 判断是否支持 loading
    if ('loading' in HTMLImageElement.prototype) {
        for (let i = 0; i < imgs.length; i ++) {
            const img = imgs[i]
            const dataSrc = img.getAttribute('data-src')
            if (!dataSrc) continue
            img.loading = 'lazy'
            img.src = dataSrc
            img.removeAttribute('data-src')
        }
    }
}
lazyLaod()