一个简单的图片懒加载

主要用来讲 lazyload 的大概原理
生产环境建议使用插件，或者基于这个思路再优化加工
jQuery-lazyload
vue-lazyload
react-lazyload
另外，许多 UI 框架都自带有 lazyload 插件，如layui-flow和Element等，往往不需要重复引用

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var imgs = document.querySelectorAll('img')

function lazyload() {
  // 获取滚动高度
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  // 获取视口高度
  var viewPortSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  for(var i = 0; i < imgs.length; i++) {
    // 滚动高度 + 视口高度 - 图片距页面顶部的距离
    // 计算出图片是否进入视口
    var x = scrollTop + viewPortSize - imgs[i].offsetTop
    // 图片进入视口
    // 将data-src 赋值给 img的src属性即可
    if(x > 0) {
      imgs[i].src = imgs[i].getAttribute('data-src')
    }
  }
  // 设置定时器，或监听滚动事件
  setInterval(lazyload, 1000)
}