欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery的懒加载的原理及实现

程序员文章站 2022-04-30 23:41:55
...
这次给大家带来jquery的懒加载的原理及实现,实现jquery的懒加载注意事项有哪些,下面就是实战案例,一起来看一下。

懒加载的原理

1、代码实现,加载到当前视口:

function isVisible($node){    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $(window).offSet().top;    if (offSetTop < winH + scrollTop) {        return true;
    } else {        return false;
    }
}

2、再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:

$(window).on("scroll", function{    if (isVisible($node)){        console.log(true);
    }
})

3、加油吧,皮卡丘!

var hasShowed = false;
$(window).on("sroll",function{    if (hasShowed) {        return;
    } else {        if (isVisible($node)) {
            hasShowed = !hasShowed;            console.log(true);            //ajax请求刷新view层
        }
    }
})

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

相关阅读:

VUE-CLI @2.9.1以后版本的问题

WebStorm怎么自定义用户设置

以上就是jquery的懒加载的原理及实现的详细内容,更多请关注其它相关文章!