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

子化诗理

于 2018-06-20 10:01:09 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：需求整理文章标签：底部移动端图片懒加载

本文链接：https://blog.youkuaiyun.com/webFront/article/details/80742197

需求整理专栏收录该内容

16 篇文章

订阅专栏

博客给出一段代码，用于实现移动端图片懒加载功能。通过获取所有懒加载的img标签，结合滚动条的垂直偏移、元素整体高度和可见高度，判断是否到底部或顶部。当满足条件时触发图片加载，避免每次都从第一张图片开始遍历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        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;
                }
            }
        }