原生js实现图片懒加载

发表于2020-05-11更新于2020-05-11

原生js实现图片懒加载：lazy-loading

演示demo地址：图片懒加载效果演示

项目地址：图片懒加载

快速开始

HTML结构

1
<img data-src="img/1.jpg" data-img="false">

JS脚本

1
2
3
4
5
6
7
8
9
10
11
var ele = document.getElementsByTagName('img')
window.onscroll = function () {
  var t = document.documentElement.scrollTop || document.body.scrollTop
  for (var i = 0; i < ele.length; i++) {
    if ((ele[i].offsetTop + ele[i].parentNode.offsetTop) <= t + window.innerHeight && ele[i].dataset.img === 'false') {
      ele[i].src = ele[i].dataset.src
      ele[i].dataset.img = true
    }
  }
}
window.onscroll()

兼容性

  • 兼容谷歌、火狐、IE等主流浏览器以及手机端