多数纯js替代框架的方案都比较复杂,这个方案,或者说lazyload的方案js原声实现是跟轻量同时更便捷的。
以前在网上参考过实现过程,后面自己尝试写了下,越发觉得精炼有美感。话不多说,开干!
选定懒加载图片
var imgs = document.querySelectorAll('.item img');
基础函数getTop
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetTop;
}
return T;
}
lazyLoad主体函数
function lazyLoad(imgs) {
var H = window.innerHeight;//获取当前显示窗高度
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) { //循环执行所有选定图片
if (H + S > getTop(imgs[i])) {
//判断图片是否到达可视区域,这一步完全可以设置一个提前缓冲,减少用户感知
//(感觉不到技术才是最好的技术)
imgs[i].src = imgs[i].getAttribute('data-src');
//图片满足可视条件,用data-src属性值(真实图片地址)代替默认图片,显示图片
}
}
}
下面是有点技术含量的部分
需要写一个简单的节流函数,不然会因为判断scroll造成极大运算浪费
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
}
然后把lazyLoad放到独立的函数里调用,其实不写也行
function realFunc(){
lazyLoad(imgs);
}
页面加载时先执行一次lazyload,否则滚动页面前可视区域的图片不显示
window.onload =function (){
lazyLoad(imgs);
};
利用上面的节流方案来监听scroll动作,然后执行lazyload
window.addEventListener('scroll',throttle(realFunc,250,500));
就这些了,真心说比用jquery的lazyLoad插件实现简洁得多,也优美得多。
学到了QwQ