原生 JavaScript 图片懒加载实现

Question

如何判断元素在可视区域

我们用到两个 api

Element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置，DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于 视口区域的左上角位置 而言的。

如下图所示:

window.innerHeight

浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。如下图所示：

判断原理

假设 const top = el.getBoundingClientRect().top; 来表示图片到可视区域顶部距离；
并设 const innerHeight = window.innerHeight; 来表示可视区域的高度。
不难理解，当 top < = innerHeight 的时候，表示元素在可视区域内

代码呈现

function isInViewPort (el) {
  const top = el.getBoundingClientRect() && el.getBoundingClientRect().top
  const viewPortHeight = window.innerHeight
  // 如果只考虑向下滚动加载
  // 这里有个+100是为了提前加载+ 100
  return top <= viewPortHeight
}

在可视区域如何加载元素

function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src
    el.src = source
  }
  // 这里应该是有一个优化的地方，设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。
}
function checkImgs () {
  const imgs = document.querySelectorAll('.my-photo')
  Array.from(imgs).forEach(el => {
    if (isInViewPort(el)) loadImg(el)
  })
}