概念
懒加载顾名思义突出一个“懒”字,懒字就是拖延的意思,说白就是延迟加载。比如我们进入一个新的页面进行加载的时候,这个页面很长超过了屏幕可视区域的时候,那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。
懒加载是一种优化网页性能的一种方式,它极大的提高了用户的体验。举个栗子:就拿图片来说,一个网站,单个网页的页面上“图片”是构成页面主体的一个极大部分,但是在现在一张图片的大小超过几兆是一件很正常的事,那么就需要注意到一个问题:当用户在访问一个网页的时候就会请求所有图片资源,如果网速不够快的话,那么用户只能够看到一个空白的网页,或者一个不完整的结构布局,当图片加载完成后,估计用户早就走了。
所以这就是为什么要使用懒加载的原因
总结出来有两个点:
- 全部加载用户体验差
- 一次性全部加载浪费用户流量,也许只是访问部分内容,不是全部内容都能够访问完,全部加载的话,就有点浪费流量了。
网页占用资源较多的一般都是图片,进行懒加载的情况一般都是针对于图片来进行的图片懒加载,当然还有一种情况是路由懒加载,这里讲的还有实现原理主要是针对图片。
在H5里面,图片的标签就是img
,而图片的 src
属性就是图片的来源地址。浏览器是否发起请求也是根据是否有img
标签内是否有src
属性来决定的。
知道了这点我们就可以根据标签的src
属性来进行操作了,在没进入可视区域的时候,我们先不给这个标签赋src
属性,这样浏览器就不会发送请求了。
实现过程代码实现如下:
HTML部分
<!DOCTYPE html>
<html>
<head>
<title>Demo-Lazyload</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style>
img {
height: 500px;
width: 500px;
display: block;
background: url(images/loading.gif) no-repeat center;
margin: 0 auto
}
#lazy {
width: 800px;
margin: 0 auto
}
</style>
</head>
<body>
<div id="lazy">
<img data-src="images/1.jpg" src="images/pixel.gif" />
<img data-src="images/2.jpg" src="images/pixel.gif" />
<img data-src="images/3.jpg" src="images/pixel.gif" />
<img data-src="images/4.jpg" src="images/pixel.gif" />
<img data-src="images/5.png" src="images/pixel.gif" />
<img data-src="images/6.jpg" src="images/pixel.gif" />
<!--<img data-src="真实图片地址" src="小图片地址"/>
<img data-src="真实图片地址" src="小图片地址"/>-->
</div>
<script src="js/lazyload.js"></script>
<script type="text/javascript">
var lazyloading = lazyload({
id: "lazy",
lazyTime: 200,
lazyRange: 100
});
</script>
</body>
</html>
JS代码
function lazyload(options) {
var doc = options.id ? document.getElementById(options.id) : document;
if (doc === null) return;
var tmp = doc.getElementsByTagName('img'),
tmplen = tmp.length,
imgobj = [];
for (var i = 0; i<tmplen; i++) {
var _tmpobj = tmp[i];
if (_tmpobj.getAttribute('data-src') !== null) {
if (isLoad(_tmpobj)) {
setimg(_tmpobj);
} else {
imgobj.push(_tmpobj);
}
}
}
var len = imgobj.length;
function handler() {
for (var i = 0,
end = len; i < end; i++) {
var obj = imgobj[i];
if (isLoad(obj)) {
_setimg(obj);
imgobj.splice(i, 1);
len--;
if(len===0){loadstop()}
}
}
}
function isLoad(ele) {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if(typeof ele==='undefined') return false;
var edit = ~~ele.getAttribute("data-range") || options.lazyRange;
var clientHeight = scrollTop + document.documentElement.clientHeight + edit;
var offsetTop = 0;
while(ele.tagName.toUpperCase() !== 'BODY'){
offsetTop += ele.offsetTop;
ele = ele.offsetParent;
}
return (clientHeight > offsetTop);
}
function _setimg(ele) {
if (options.lazyTime) {
setTimeout(function() {
setimg(ele);
},
options.lazyTime + ~~ele.getAttribute('data-time'))
} else {
setimg(ele);
}
}
function setimg(ele) {
ele.src = ele.getAttribute('data-src');
}
function loadstop(){
window.removeEventListener ? window.removeEventListener("scroll", handler, false) : window.detachEvent("onscroll", handler);
}
loadstop();
window.addEventListener ? window.addEventListener("scroll", handler, false) : window.attachEvent("onscroll", handler);
}
干看代码是有点难懂的,下面是我整理出的一些关键词汇,结合平常学习到的知识,大家应该能看懂
- meta标签
http-equiv="Content-Type"
- 提供了content属性的信息/值的HTTP头。
- 可用于模拟一个HTTP响应头。
content="text/html"
- 文档类型为文本html格式
getAttribute
- 获取指定属性名的属性值
scrollTop
- 元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么他的
scrollTop
值为0 。
- 元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么他的
pageYOffset
- 它会返回文档当前沿垂直轴(即向上或者向下)滚动的像素数。
clientHeight
- 元素的高(不包括边框)padding+height,可以理解为元素可视区域的高度。
tagName
- 返回元素的标签名 HTML 返回
tagName
属性值是大写的
- 返回元素的标签名 HTML 返回
offsetParent
- 是距离调用
offsetParent
的元素最近的,已经进行过css
定位的容器属性。如果没有定位,则取body元素的应用。元素的style设置为display:none
时,offsetParent
属性返回null
- 是距离调用
offsetTop
- 获取对象相对于由
offsetParent
属性指定的父坐标距离顶端的高度
- 获取对象相对于由
detachEvent
- 不是w3c标准,通常为了适用于
ie
浏览器,谷歌、open也能使用,和removeEventListener
作用基本相同,必须配合attachEven
t使用。
- 不是w3c标准,通常为了适用于
简述路由懒加载概念:
懒加载也叫延迟加载,即在需要的时候进行加载,随用随载
在单页面应用中,如果没有引用懒加载,运用
webpack
打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,运用懒加载可以将页面进行划分,按需加载页面,可以分担首页所承担的加载压力,减少加载用时