原生JS实现移动端判断滑动到底部还是顶部并实现懒加载功能

        var lazyImg = document. querySelectorAll( 'img'); //获取所有懒加载的img标签
var lazyLen = lazyImg. length; //获取所有懒加载的img的长度
var lazyNum = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
window. onscroll = function () {
var scrollT = document. documentElement. scrollTop || document. body. scrollTop; //滚动条的垂直偏移
var scrollH = document. documentElement. scrollHeight || document. body. scrollHeight; //元素的整体高度
var clientH = document. documentElement. clientHeight || document. body. clientHeight; //元素的可见高度
if ( scrollT == scrollH - clientH) {
console. log( "到底部了");
} else if ( scrollT < scrollH - clientH) {
console. log( "到顶了")
}
for ( var i = lazyNum; i < lazyLen; i++) {
if ( lazyImg[ i]. offsetTop < clientH + scrollT) { //触发加载
if ( lazyImg[ i]. getAttribute( 'src') == '') {
lazyImg[ i]. src = lazyImg[ i]. getAttribute( 'lazy_src');
}
lazyNum = i + 1;
}
}
}

猜你喜欢

转载自blog.csdn.net/webfront/article/details/80742197