jquery实现下拉自动加载

最新推荐文章于 2022-01-18 14:43:37 发布

原创最新推荐文章于 2022-01-18 14:43:37 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了网页中无限滚动加载技术的实现原理，详细解释了如何使用JavaScript监听滚动条位置，动态加载内容，避免页面刷新，提升用户体验。通过设置加载阈值和最大加载次数，实现了高效且限制合理的无限加载效果。

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

<script type="text/javascript">  
    $(document).ready(function(){  
        var range = 50;             //距下边界长度/单位px  
        var elemt = 500;           //插入元素高度/单位px  
        var maxnum = 20;            //设置加载最多次数  
        var num = 1;  
        var totalheight = 0;   
        var main = $("#content");                     //主体元素  
        $(window).scroll(function(){  
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
              
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
            //console.log("页面的文档高度 ："+$(document).height());  
            //console.log('浏览器的高度：'+$(window).height());  
              
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
            if(($(document).height()-range) <= totalheight  && num != maxnum) {  
            //你要执行的操作
                num++;  
            }  
        });  
    });  
    </script>