使用 JavaScript 实现图片懒加载的几种实现方案(一)小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 19

使用 JavaScript 懒加载的几种实现方案

html 模板代码

懒加载就是不在一次加载过程中同时加载所有的元素的资源, 比如图片等显示内容, 而是在需要看到的时候动态的加载, 以减少资源的消耗, 和页面的卡顿等待时间问题.

<body>
  <div class="container">
    <img src="" data-src="./img/img-1.jpg" alt="loading" loading="lazy" class="my-photo" />
    <img src="" data-src="./img/img-2.jpg" alt="loading" loading="lazy" class="my-photo" />
    <img src="" data-src="./img/img-3.jpg" alt="loading" loading="lazy" class="my-photo" />
    <img src="" data-src="./img/img-4.jpg" alt="loading" loading="lazy" class="my-photo" />
    <img src="" data-src="./img/img-5.jpg" alt="loading" loading="lazy" class="my-photo" />
  </div>
</body>

JavaScript 来实现懒加载代码逻辑:

这里在代码中给出具体实现思路及说明:

实现方法一:

///方法一:
var aImg = document.querySelectorAll('img')
var len = aImg.length
var n = 0 //存储图片加载到的位置，避免每次都从第一张图片开始遍历
var H = window.innerHeight // 可视区域高度
window.onscroll = function () {
  var seeHeight = document.documentElement.clientHeight
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  for (var i = n; i < len; i++) {
    if (aImg[i].offsetTop < seeHeight + scrollTop) {
      if (aImg[i].getAttribute('src') == '') {
        aImg[i].src = aImg[i].getAttribute('data-src')
      }
      n = i + 1
      console.log('n = ' + n)
    }
  }
}

实现方法二

// 方法二:
var imgs = document.querySelectorAll('img')
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
  var T = e.offsetTop
  while ((e = e.offsetParent)) {
    T += e.offsetTop
  }
  return T
}

function lazyLoad(imgs) {
  var H = window.innerHeight
  var S = document.documentElement.scrollTop || document.body.scrollTop
  for (var i = 0; i < imgs.length; i++) {
    if (H + S > getTop(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute('data-src')
    }
  }
}

window.onload = window.onscroll = function () {
  lazyLoad(imgs)
}