图片懒加载的前世今生

站长手记作者： 2024-08-28 02:55:01

到此，实现图片懒加载主要有两种方法：监听 scroll 事件，通过 getBoundingClientRect() 计算目标元素与视口的交叉状态；IntersectionObserver 接口。

一、前言

二、原理

三、前世

给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中，通常是data-src；
监听与用户滚动行为相关的 scroll 事件；
在 scroll 事件处理程序中利用 Element.getBoundingClientRect() 方法判断目标元素与视口的交叉状态；
当目标元素与视口的交叉状态大于0时，将真实的图片链接赋给目标元素 src 属性或者 backgroundImage 属性。

1、scroll 事件

function throttle (fn, interval = 500) { let timer = null let firstTime = true return function (...args) { if (firstTime) { // 第一次加载 fn.apply(this, args) return firstTime = false } if (timer) { // 定时器正在执行中，跳过 return }

    timer = setTimeout(() => {
      clearTimeout(timer)
      timer = null fn.apply(this, args)
    }, interval)

  }
}

2、getBoundingClientRect()方法

top 和 left 是目标元素左上角坐标与网页左上角坐标的偏移值；
width 和 height 是目标元素自身的宽度和高度。

function isElementInViewport (el) { const { top, height, left, width } = el.getBoundingClientRect() const w = window.innerWidth || document.documentElement.clientWidth const h = window.innerHeight || document.documentElement.clientHeight return (
    top <= h &&
    (top + height) >= 0 &&
    left <= w &&
    (left + width) >= 0 )
}

3、实现

scroll 事件只有在滚动行为发生时，才会被触发，这里需要手动加载一次首屏的图片；
利用 addEventListener 注册事件处理程序时，需要保存事件处理程序的引用，以便销毁注册的事件程序。

function LazyLoad (el, options) { if (!(this instanceof LazyLoad)) { return new LazyLoad(el)
  } this.setting = Object.assign({}, { src: 'data-src', srcset: 'data-srcset', selector: '.lazyload' }, options) if (typeof el === 'string') {
    el = document.querySelectorAll(el)
  } this.images = Array.from(el) this.listener = this.loadImage() this.listener() this.initEvent()
}

LazyLoad.prototype = {
  loadImage () { return throttle(function () { let startIndex = 0 while (startIndex < this.images.length) { const image = this.images[startIndex] if (isElementInViewport(image)) { const src = image.getAttribute(this.setting.src) const srcset = image.getAttribute(this.setting.srcset) if (image.tagName.toLowerCase() === 'img') { if (src) {
              image.src = src
            } if (srcset) {
              image.srcset = srcset
            }
          } else {
            image.style.backgroundImage = `url(${src})` } this.images.splice(startIndex, 1) continue }
        startIndex++
      } if (!this.images.length) { this.destroy()
      }
    }).bind(this)
  },
  initEvent () { window.addEventListener('scroll', this.listener, false)
  },
  destroy () { window.removeEventListener('scroll', this.listener, false) this.images = null this.listener = null }
}

四、今生

1、配置项

root：所监听对象的具体祖先元素，默认是 viewport ；
rootMargin：计算交叉状态时，将 margin 附加到祖先元素上，从而有效的扩大或者缩小祖先元素判定区域；
threshold：设置一系列的阈值，当交叉状态达到阈值时，会触发回调函数。

2、回调函数

time：返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳；
target：目标元素；
rootBounds：祖先元素的矩形区域信息；
boundingClientRect：目标元素的矩形区域信息，与前面提到的 Element.getBoundingClientRect() 方法效果一致；
intersectionRect：祖先元素与目标元素相交区域信息；
intersectionRatio：返回intersectionRect 与 boundingClientRect 的比例值；
isIntersecting：目标元素是否与祖先元素相交。

3、实现

observe：开始监听一个目标元素；
unobserve：停止监听特定的元素；
disconnect：使 IntersectionObserver 对象停止监听工作；
takeRecords：为所有监听目标返回一个 IntersectionObserverEntry 对象数组并且停止监听这些目标。

function LazyLoad (images, options = {}) { if (!(this instanceof LazyLoad)) { return new LazyLoad(images, options)
  } this.setting = Object.assign({}, { src: 'data-src', srcset: 'data-srcset', selector: '.lazyload' }, options) this.images = images || document.querySelectorAll(this.setting.selector) this.observer = null this.init()
}

LazyLoad.prototype.init = function () { let self = this let observerConfig = { root: null, rootMargin: '0px', threshold: [0]
  } this.observer = new IntersectionObserver(entries => {
    entries.forEach(entry => { const target = entry.target if (entry.intersectionRatio > 0) { this.observer.unobserve(target) const src = target.getAttribute(this.setting.src) const srcset = target.getAttribute(this.setting.srcset) if ('img' === target.tagName.toLowerCase()) { if (src) {
            target.src = src
          } if (srcset) {
            target.srcset = srcset
          }
        } else {
          target.style.backgroundImage = `url(${src})` }
      }
    })
  }, observerConfig) this.images.forEach(image => this.observer.observe(image))
}