JS使用lazyload进行图片懒加载

原理：

图片的加载是由src引起的，当对src赋值时浏览器会请求图片资源，基于这个，可以利用HTML5的属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src。就能实现图片的按需加载了，也就是懒加载了

方法：

1.使用lazyload插件，引用jquery.js和jquery.lazyload.js
2.将img标签中的src属性赋值为加载图片，即一张临时的loading.gif图，将真正的图片路径放在data-original属性中
3.当JS监听到该图片元素进入可视窗口时，将data-original属性中的地址存赋予到src属性中，达到懒加载的效果

引用

//html
   
   



    
    

      
      

       
       
      
      

      
      

       
       
      
      

      
      

       
       
      
      

      
      

       
       
      
      

      
      

       
       
      
      


   
   

//js
$('ul img').lazyload()

这样就完成了最简易的图片懒加载了

可自行拓展延伸