🌁

图片懒加载

实现思路

Element.getBoundingClientRect() 方法返回(DOMRect对象)元素的大小及其相对于视口的位置。
如果图片元素出现再屏幕上,
即: 视口高度 window.innerHeight - 元素顶部高度Element.getBoundingClientRect().top ≥ 0),
则填充图片的 src 属性

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
  </head>
  <body>
    <div id="img-group">
      <div>
        <img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
      </div>
      <div>
        <img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
      </div>
      <div>
        <img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
      </div>
      <div>
        <img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
      </div>
      <div>
        <img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
      </div>
      <div>
        <img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
      </div>
    <div>
    <script>
      // 获取可视高度
      let innerHeight = window.innerHeight
      window.onload = () => {
        let imgGroup = document.getElementById('img-group')
        let imgDoms = imgGroup.getElementsByTagName('img')
        // 设置开始处理 num, 避免重复调用
        let num = 0
        let loadImg = (imgDoms) => {
          for (let i = num; i < imgDoms.length; i++) {
            // Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
            // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
            if (innerHeight - imgDoms[i].getBoundingClientRect().top > 0) {
                imgDoms[i].src = imgDoms[i].getAttribute('data-src')
                // 下次直接从下一个元素开始判断
                num = i + 1
            }
          }
        }
        // 先调用一次初始化
        loadImg(imgDoms)
        window.onscroll = () => {
					// 优化项, 使用防抖节流减少被触发次数
          loadImg(imgDoms)
        }
      }
    </script>
  </body>
</html>

CodeSandbox