js滚动加载

Dear 丶 2024-04-18 17:30 66阅读 0赞

欢迎大家一起交流学习n(\*≧▽≦\*)n

效果：

![20190910110637264.gif][]

**html**

<div>
        <div class="top">
        </div>
        <div id="loading">
        </div>
    </div>

**css**

.top {
                width: 600px;
                height: 600px;
                overflow: auto;
            }
    
            .row {
                width: 100%;
                height: 200px;
                background-color: pink;
                margin-bottom: 10px;
            }
    
            #loading {
                display: flex;
                align-items: center;
                margin-left: 180px;
                margin-top: 20px;
            }
    
            .loadAnimation {
                width: 4px;
                height: 10px;
                background-color: #68b2ce;
                animation: change linear 0.6s infinite;
                margin-right: 4px;
            }
    
            .loadAnimation:nth-child(1) {
                animation-delay: 0s;
            }
    
            .loadAnimation:nth-child(2) {
                animation-delay: 0.1s;
            }
    
            .loadAnimation:nth-child(3) {
                animation-delay: 0.2s;
            }
    
            .loadAnimation:nth-child(4) {
                animation-delay: 0.3s;
            }
    
            .loadAnimation:nth-child(5) {
                animation-delay: 0.4s;
            }
    
            .loadAnimation:nth-child(6) {
                animation-delay: 0.5s;
            }
    
            @keyframes change {
                0%, 60%, 100% {
                    transform: scale(1);
                }
                30% {
                    transform: scaleY(2);
                }
            }

**js**

let data = [
            {
                name: "1"
            },
            {
                name: "2"
            },
            {
                name: "3"
            },
            {
                name: "4"
            },
            {
                name: "5"
            },
            {
                name: "6"
            },
            {
                name: "7"
            },
            {
                name: "8"
            },
            {
                name: "9"
            },
            {
                name: "10"
            }
        ];
        let array = [];
        let pageSize = 4;
        let curPage = 1;
        $(function () {
            getData(pageSize, curPage)
            createTableBody();
        })
        $(".top").scroll(function () {
            let nScrollHei = $(this)[0].scrollHeight; //滚动距离总长
            let nScrollTop = $(this)[0].scrollTop;   //滚动到的当前位置
            let tableBodyHei = $(".top").height();
            if (nScrollTop + tableBodyHei >= nScrollHei) {
                console.log("111");
                curPage++;
                getData(pageSize, curPage);
                $("#loading").append('<div class="loadAnimation"></div>\n' +
                    '        <div class="loadAnimation"></div>\n' +
                    '        <div class="loadAnimation"></div>\n' +
                    '        <div class="loadAnimation"></div>\n' +
                    '        <div class="loadAnimation"></div>\n' +
                    '        <div class="loadAnimation"></div>');
                setTimeout(function () {
                    createTableBody();
                    $("#loading").empty();
                }, 1000)
            }
        });
    
        function createTableBody() {
            for(let i=0;i<array.length;i++) {
                $(".top").append('<div class="row">'+array[i].name+'</div>');
            }
        }
    
        function getData(pageSize, curPage) {
            array = [];
            let start = pageSize * (curPage-1);
            let end = pageSize * curPage;
            let index = 0;
            if (end > data.length) {
                end = data.length
            }
            for (let i = start; i < end; i++) {
                array[index] = data[i];
                index++;
            }
            console.log(array)
        }

[20190910110637264.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3af3bfa0d8014de4b65b961971097601.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关 js滚动加载

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910110637264.gif][] **html** <div> <d...

Dear 丶/ 2024年04月18日 17:30/ 0 赞/ 67 阅读

相关 php+html+js+滚动加载,jQuery局部div滚动加载远程数据

之前我们介绍了浏览器滚动条远程加载数据http://www.sucaihuo.com/js/9.html，这次我们介绍PHP+mysql局部div鼠标滚轮远程加载数据 ![b

布满荆棘的人生/ 2023年01月16日 04:50/ 0 赞/ 181 阅读

相关 Js滚动条到底底部加载更多

[https://blog.csdn.net/qq\_40816649/article/details/86512538][https_blog.csdn.net_qq_408

傷城~/ 2022年12月27日 08:45/ 0 赞/ 187 阅读

相关 php 滚动加载 js,jquery浏览器滚动加载技术实现方案

要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤

曾经终败给现在/ 2022年11月12日 10:57/ 0 赞/ 240 阅读

相关 js窗体滚动加载数据事件

js窗体滚动加载数据事件 function scrollData() \{ var top = $(window).scrollTop();//窗体滚动的

小咪咪/ 2022年08月19日 01:45/ 0 赞/ 161 阅读

相关滚动加载

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果

比眉伴天荒/ 2022年05月28日 01:37/ 0 赞/ 281 阅读

相关滚动条滚动异步加载数据

<script type="text/javascript"> //获取列表中的原有内容 var content=document.get

待我称王封你为后i/ 2022年05月24日 07:15/ 0 赞/ 421 阅读

相关 JS简单实现滚动自动加载新内容（懒加载）

加载源 // 这里存后台发来的数据 var galleryList = [ { src: "./images/1.jpeg",

秒速五厘米/ 2022年04月05日 04:40/ 0 赞/ 443 阅读

相关向下滚动页面加载图片的js

js代码 scroll.photo.js : window.imgscroll = { options: { target:

小鱼儿/ 2022年01月06日 13:37/ 0 赞/ 304 阅读

相关移动端无限滚动加载 js实现原理

由于网页的执行都是单线程的，在`JS`执行的过程中，页面会呈现阻塞状态。因此，如果`JS`处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分

ゞ浴缸里的玫瑰/ 2021年06月26日 16:06/ 0 赞/ 541 阅读