懒加载提高页面性能

一、什么是懒加载？

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

二、如何实现懒加载

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

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

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

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

三、具体实现：

1.设计HTML

<img data-original="mogu.jpg" alt="" class="picture" src=""  >

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

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

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lazyload</title>
	<style>
	#pictures{
		width: 900px;
		border: 1px solid #ccc;
		overflow: hidden;
	}
	.picture{
		float:left;
		width:250px;
		height:250px;
		margin: 10px 20px;
		border:1px solid #ccc;

	}
	</style>
	
</head>
<body>
	<div id="pictures">
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >
		<img data-original="mogu.jpg" alt="" class="picture" src=""  >

	</div>
	<script>
		var images=document.getElementsByTagName('img');
		function lazyload() {
		    Array.prototype.forEach.call(images,function(item,index) {
				
				var height=document.documentElement.clientHeight;				
				var scrollTop=document.documentElement.scrollTop;				
				var offsetTop=item.offsetTop;				

				if(scrollTop+height>offsetTop){					
					
					var img = new Image();        			
       				        img.onload = function () {       					    
         		 		   item.src = img.src;
       				        }
      				img.src = item.dataset.original;      				   				
			        }							
			});		
		}
		lazyload();                   //第一次加载页面时需要自动加载

		document.addEventListener("scroll",lazyload); 

	</script>
</body>
</html>

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

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。

<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>

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

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

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

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

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

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

	}
});

懒加载提高页面性能

猜你喜欢