纯JavaScript实现lazyload图片懒加载功能

发表于 2020-06-26   |   分类于 笔记

话不多说,开干!

选定懒加载图片

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插件实现简洁得多,也优美得多。

© 2020 Powered by Typecho & Theme Quark