JavaScript图片懒加载

首先对图片懒加载的函数的封装

 1 var n=0;//存储图片的位置，避免每次都从第一张图片进行加载
 2 function lazyload(imgs) {
 3     //获取可视区的高度
 4     var height = document.documentElement.clientHeight
 5     //获取滚动条的位置
 6     var scroll = document.body.scrollTop || document.documentElement.scrollTop
 7    
 8     for (var i = 0; i < imgs.length; i++) {
 9         if (imgs[i].offsetTop < height + scroll) {
10             if (imgs[i].getAttribute('src') == '' || !imgs[i].getAttribute('src')) {
11                  imgs[i].setAttribute('src', imgs[i].getAttribute('data-src'))
12             }
13         }
14         n=i+1
15     }
16 }

然后再html中调用（body中的内容）如：

 1 

 2      
 3      
 4      
 5      
 6 
 7      
 8