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 }

 1 <div class="box">
 2      <img data-src="./images/001.jpg" class="lazy-load">
 3      <img data-src="./images/002.jpg" class="lazy-load">
 4      <img data-src="./images/003.jpg" class="lazy-load">
 5      <img data-src="./images/004.jpg" class="lazy-load">
 6 </div>
 7      <script src=‘lazyLoad.js‘></script>
 8      <script>
 9           var imgs=document.getElementsByClassName(‘lazy-load‘)
10           lazyload(imgs)//用于刚打开页面时，显示图片
11           window.onscroll=function(){ //当滑动滚动条时进行懒加载          
12           lazyload(imgs)
13          }
14            
15       </script>