主题资源网站制作平台,互联网公司排名深信服,河南省建设厅网站103,台前网站建设电话一、Lazyload的理解分析 Lazyload技术是一种延迟加载技术#xff0c;让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验 实现思路 1#xff09;页面较长#xff0c;屏幕的可视区域有限 2#xff09;不设置页面中img标签的src属性值或者将其指向同一个占位图…一、Lazyload的理解分析 Lazyload技术是一种延迟加载技术让页面加载速度快到飞起、减轻服务器压力、节约流量、提升用户体验 实现思路 1页面较长屏幕的可视区域有限 2不设置页面中img标签的src属性值或者将其指向同一个占位图 3图片的实际地址存在img标签自定义的一个属性中如“data-url” 4监听scroll滚动到某个位置时动态的将url替换成实际的“data-url” 流程图分析: 代码实现 html部分
!DOCTYPE html
htmlheadmeta charsetUTF-8titleLazyload/titlestyle typetext/css.mob-wrap li{list-style: none;width: 100%;height: 345px;}/style/headbodyul classmob-wrapliimg classtamp-img altloading data-srchttp://mob.com/public/images/index/sharesdk-logo.jpgpShareSDK轻松实现社会化功能/p/liliimg classtamp-img altloading data-srchttp://mob.com/public/images/index/sms-logo.jpgp短信验证码SDK/p/liliimg classtamp-img altloading data-srchttp://mob.com/public/images/index/rec-logo.jpgpMobLink实现Web与App的无缝链接/p/li/ul/body
/htmljs部分
var aImg [{src:http://mob.com/public/images/index/sharesdk-logo.jpg,txt:ShareSDK轻松实现社会化功能},{src:http://mob.com/public/images/index/sms-logo.jpg,txt:短信验证码SDK},{src:http://mob.com/public/images/index/rec-logo.jpg,txt:MobLink实现Web与App的无缝链接}
];
var sLi ;
document.getElementsByClassName(mob-wrap)[0].innerHTML;
for(let i 0;i10;i){sLi document.createElement(li);sLi.innerHTML img classtamp-img altloading src./zwt.gif data-src${aImg[i%3].src}p${aImg[i%3].txt}/p;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 imgs.length; i) {var imgHeight imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight windowHeight bodyScrollHeight - 340) {imgs[i].src imgs[i].getAttribute(data-src);imgs[i].className imgs[i].className.replace(tamp-img,);}}
};二、Lazyload的再优化
不做任何处理直接监听scroll必然导致在滚动鼠标滚轮的时候过于频繁的触发处理函数。如果刚巧在处理函数中有大量的操作dom等消耗性能的行为引发大量操作导致页面变卡变慢甚至浏览器崩溃无响应处理这种问题的思路是节流和防抖节流函数的形象比喻比如在接咖啡的时候按了一次按钮会出咖啡紧跟着再按几次按钮接到的还是那一杯咖啡相当于后面几次按的没有起作用每隔least时间内至少执行一次的节流函数 1代码如下
//节流函数
_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);}}
}2使用节流函数 代码如下
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 imgs.length; i) {var imgHeight imgs[i].offsetTop;// 图片距离顶部高度 if (imgHeight windowHeight bodyScrollHeight - 340) {imgs[i].src imgs[i].getAttribute(data-src);imgs[i].className imgs[i].className.replace(tamp-img,);}}
}
window.onscroll _throttle(compare, 350,600);3说明滚动时间least长于600调用compare否则延迟350ms执行。这样相对于直接onscroll性能得到更进一步提升在功能上也没有什么问题不同的业务场景调整一下delay和least就可以
