作者:curlt_357 | 来源:互联网 | 2023-09-10 13:41
Lazyload 简介
前端工作中,界面和效果正在变得越来越狂拽炫酷,与此同时性能也是不得不提的问题。有些项目,页面长,图片多,内容丰富。像商城页面。如果同步加载时一次性加载完毕,那肯定是要等到花都谢了,loading
转的人都崩溃~。今天分享的是Lazyload
技术 是一种延迟加载技术。让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验。
一、实现思路
页面较长,屏幕的可视区域有限。 不设置页面中img
标签的src属性值或者将其指向同一个占位图。 图片的实际地址存在img
标签自定义的一个属性中,如:“data-url”
。 监听scroll
,滚动到某个位置时,动态的将url
替换成实际的“data-url”
。
二、上代码
.mob-wrap li{list-style: none;width: 100%;height: 345px;}
-
ShareSDK轻松实现社会化功能
-
短信验证码SDK
-
MobLink实现Web与App的无缝链接
简要流程
st=>start: Start
e=>end
op=>operation: 监听滚动事件
cOnd=>condition: 距顶部高度inputoutput: 将url替换成data-url
st->op->cond
cond(yes)->io->e
cond(no)->op
var aImg = [
{"src":"https://img.php1.cn/3cd4a/1eebe/cd5/a5d7215df572c386.webp","txt":"ShareSDK轻松实现社会化功能"},
{"src":"https://img.php1.cn/3cd4a/1eebe/cd5/43a754c811e7ec5c.webp","txt":"短信验证码SDK"},
{"src":"https://img.php1.cn/3cd4a/1eebe/cd5/72fd2c126203a875.webp","txt":"MobLink实现Web与App的无缝链接"}
];
var sLi = '';
document.getElementsByClassName("mob-wrap")[0].innerHTML="";
for(let i = 0;i${aImg[i%3].txt}
`;
document.getElementsByClassName("mob-wrap")[0].appendChild(sLi);
};
window.Onscroll= function () {
var bodyScrollHeight = document.documentElement.scrollTop;// body滚动高度
var windowHeight = window.innerHeight;// 视窗高度
var imgs = document.getElementsByClassName('tamp-img');
for (var i =0; i
三、再优化
不做任何处理直接监听scroll
必然导致在滚动鼠标滚轮的时候,过于频繁的触发处理函数。 如果刚巧在处理函数中有大量的操作dom
等消耗性能的行为,引发大量操作,导致页面变卡变慢, 甚至浏览器崩溃无响应。 处理这种问题的思路是节流和防抖。 节流函数的概念有一个很形象的比喻:在接咖啡的时候,按了一次按钮会出咖啡, 紧跟着再按几次按钮接到的还是那一杯咖啡,相当于后面几次按的没有起作用。
常规的节流在这里就不多说了,下面介绍的是一种每隔least
时间内至少执行一次的节流函数。
//节流函数
_throttle = (fn, delay, least) => {
var timeout = null,
startTime = new Date();
fn();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= least) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
使用节流函数
function compare () {
var bodyScrollHeight = document.documentElement.scrollTop;// body滚动高度
console.log(bodyScrollHeight+"替换src方法")
var windowHeight = window.innerHeight;// 视窗高度
var imgs = document.getElementsByClassName('tamp-img');
for (var i =0; i
滚动时间least长于600,调用compare,否则延迟350ms执行。 这样相对于直接onscroll性能得到更进一步提升,在功能上也没有什么问题。 不同的业务场景调整一下delay和least就可以。