前端如何实现图片懒加载

1 图片懒加载简介

等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片。

2 图片懒加载原理

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。
注意：
1) data-xxx 中的xxx可以自定义，这里我们使用data-src来定义;
2) 懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可
例子：

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
    var scrollTop = document.body.scrollTop || document.document
    Element.scrollTop;
    var winHeight= window.innerHeight;
    for(var i=0;i < imgs.length;i++){
      if(imgs[i].offsetTop < scrollTop + winHeight ){
        imgs[i].src = imgs[i].getAttribute('data-src');
      }
    }
  }
  window.onscroll = lozyLoad();
</script>