懒加载提高页面性能

一、什么是懒加载？

  懒加载，就是延迟加载。针对于多图片的页面，只有当该图片出现在页面视区中时，再加载该图片。。可以防止页面一次性加载完所有的图片，用户等待时间较长，影响用户体验。

二、如何实现懒加载

 1. 将页面中的图片的src属性设置为空，并将src属性真正的值存放在自定义属性data-originnal（自定义属性以data-开头）。

 2.为页面中的图片设置好大小，防止引起页面的回流，影响性能。

 3.判断元素是否进入用户视野中。（利用元素的offsetTop属性与  scrollTop、clientTop之间的关系判断）。若进入视野，则将      data-original属性的值赋给图片的src属性

 4.  滚动，重复判断元素是否进入视野。

三、具体实现：

1.设计HTML

2.判断元素是否进入视野

if(scrollTop+height>offsetTop){					
					
	var img = new Image();             //跨域异步请求图片
        			
       	img.onload = function () {
       		console.log(1);
         	item.src = img.src;
       	}
      	img.src = item.dataset.original;    //获取自定义对象的属性
      				   				
}

四、完整代码

五、代码中的基础问题以及解决方法

 1.判断是否进入可视区

     

2.获取自定义的属性

   1.通过element.dataset.original.

      语法：

               

     基本上最新的浏览器都支持，对于低版本的浏览器兼容性不好。

  对于 element.dataset的详细使用，参考链接点击打开链接

  对于如何兼容低版本的浏览器，请参考   我的文章 ，实现兼容版本的element.dataset。

  2.通过 document.getAtrribute（“data-original”）；

     兼容性好

六、代码的其他问题

   判断元素是否在可视区域时，会重复判断元素，造成浪费。

七、使用echo.js库实现预加载

  echo.js使用原生js编写，不需要依赖其他库。可独立使用。（lazyload是jquery插件，使用时必须引入jquery，功能完善）

      1. 下载并引入echo.js。  

      2.设置图片的自定义属性为data-echo

      3. 使用：获取元素并调用init（)方法。接收一个对象。对象参数如下。

         offset：图片在可视区域下方一段距离时，开始加载

         throttle：图片延迟多少毫秒后加载。   

         unload：是否卸载在可视区域外面的图片。默认为false。           

echo.init({
	offset:0,
	throttle:0,
	unload:true,
	callback:funtion(element,op){

	}
});