实现无限加载功能

最新推荐文章于 2025-05-20 10:59:52 发布

weixin_53198972

最新推荐文章于 2025-05-20 10:59:52 发布

阅读量424

点赞数 6

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_53198972/article/details/138195697

本文介绍了如何利用jQuery开发无限滚动功能，包括HTML结构设置、判断触底加载新内容的逻辑、动画效果和防止重复加载的处理。

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

无限滚动功能通常是通过监听滚动事件，并在用户滚动到页面底部时自动加载更多内容来实现的。以下以jQuery为例来说明如何实现无限滚动：

首先，你需要在HTML中设置一个容器来显示内容，还可以设置一个等待加载新内容时的动画（初始时可能是隐藏的）。

 * {
            margin: 0;
            padding: 0;
        }
        .content-container {
            margin: 50px 50px 0 50px;
        }
        #content-item {
            border: 1px solid #000;
            height: 150px;
            width: 150px;
            margin: 20px;
        }
        #loading {
            display: none;
            margin: auto;
            width: 60px;
            aspect-ratio: 2;
            --_g: no-repeat radial-gradient(circle closest-side,#4e4b4b 90%,#0000);
            background: 
                var(--_g) 0%   50%,
                var(--_g) 50%  50%,
                var(--_g) 100% 50%;
            background-size: calc(100%/3) 50%;
            animation: l3 1s infinite linear;
            }
            @keyframes l3 {
                20%{background-position:0%   0%, 50%  50%,100%  50%}
                40%{background-position:0% 100%, 50%   0%,100%  50%}
                60%{background-position:0%  50%, 50% 100%,100%   0%}
                80%{background-position:0%  50%, 50%  50%,100% 100%}
        }

实现的主要思路：

通过滚动区域高度+可视区域高度>=文档总高度来判断是否用户滑动页面时是否已经触底。若已触底则发送请求加载新内容。

 //循环创建img
        function content(){
            for (let i = 1; i <= 18; i++) {
            let img = document.createElement("img")
            img.src = `img/1 (${i}).jpg`
            img.id ="content-item"
            let box = document.getElementsByClassName("content-container")[0]
            box.appendChild(img)
        }
        }
        //创建初始内容
        content()
        $(document).ready(function () {
            // 用于防止在加载过程中重复触发加载，否则用户在等待加载时往上滑再往下滑时会重复触发
            var isLoading = true;  
            var page = 1; // 当前页码，用于向服务器请求更多内容  
            // 监听滚动事件  
            $(window).scroll(function () {
                //滚动区域高度+可视区域高度>=文档总高度时
                if ($(window).scrollTop() + $(window).height() >= $(document).height() && isLoading) {
                    loadMoreContent();
                }
            });

            // 加载更多内容  
            function loadMoreContent() {
                isLoading = false; // 防止重复触发  
                $('#loading').show(); // 显示加载更多按钮  
                setTimeout(function(){//用定时器模仿发送请求以及加载耗时
                    content()
                    isLoading = true; // 加载完成，将加载状态设置为false 
                },2000)
            }
            });