实现思路

1. 先不设置img的src属性，自定义一个属性保存src的真实属性值
2. 确定浏览器可视区域的高度
3. 获取每个img标签距离可视区域顶部的高度
4. 判断img标签距离顶部的高度是否小于浏览器可视区域的高度，如果满足条件就把img的src属性值赋值，渲染图片

功能演示

稍后奉上演示地址

gitee 地址

gitee.com/only-dream/…

html代码：

<div class="container">
    <div class="item">
      <div class="img_wrapper">
        <img data-src="./todo.jpg"/>
      </div>
      <div class="desc">测试图片懒加载</div>
    </div>
    <div class="item">
      <div class="img_wrapper">
        <img data-src="./todo.jpg"/>
      </div>
      <div class="desc">测试图片懒加载</div>
    </div>
</div>  

js代码：

(function () {
  // 获取窗口可视区域的高度
  // 兼容低版本的写法，在和现代浏览器及 IE9 以上的浏览器中，
  // 可以用 window.innerHeight 属性获取。在低版本 IE 的标准模式中，可以用 document.documentElement.clientHeight 获取
  const innerHeight = window.innerHeight || document.documentElement.clientHeight;

  let imgs = document.getElementsByTagName("img");

  let num = 0;
  function LazyLoad() {
    for (let i = num; i < imgs.length; i++) {
      let img = imgs[i];
      // 获取img元素距离可视区域顶部的高度
      let top = img.getBoundingClientRect().top;
      // 说明该元素已经出现在可视区域
      if (top < innerHeight) {
        let src = img.getAttribute("data-src");
        // img src赋值，渲染图片
        img.setAttribute("src", src);
        num ++;
      }
    }
  }
  // 初始化先加载一次，让在可视区域的图片加载出来
  LazyLoad();

  // 监听滚动
  window.addEventListener("scroll", () => {
    LazyLoad();
  });
})();

css代码:

.container {}

.container > .item {
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.container > .item > .img_wrapper {
  display: inline-block;
  width: 45px;
  height: 45px;
  background-color: #cccccc;
}

.container > .item > .img_wrapper img {
  width: 100%;
  height: 100%;
}
.container > .item > .desc {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}