在web中使用JQuery实现流式加载，不使用任何其他组件

前言

        最近呢，有点忙。但是每天都有记录，怎么说呢，每天都有收获。看我的发布时间就可以知道，基本一天发布好几个。对……我就是在一周中花一天时间来整理，一周所掌握的知识点和记录。好，那么我们就进入正题了！
        这几天和技术总监有聊到流式加载和懒加载的问题。大家都知道，当数据量特别大的时候，为了不影响页面的加载速度问题。一般是采用分页方式。有用到分页方式的话，就会有上一页，下一页的按钮。当第一批数据浏览完之后，想看后面的数据的话，就点击下一页按钮就好了，但是看完第二页之后，想看第二页的话，又得点上一页按钮了……还别说，懒人呢还是有的。为了提高用户的体验感，怎么方便怎么来，那么流式加载他就来了。
        只要鼠标一直下滑，第一批数据显示完了之后，第二批数据显示出来……一直类推直到数据显示完。不得不说，是很方便的，一直滑，一直滑，倒有点像是刷快手，和抖音似的哈哈。

思路

去琢磨了一下，实现起来好像并不是很难。现成的组件，框架网上百度一大堆。但是呢我可不想成为一个 CV战士程序员。里面的原理还是值得去学习。大概整理了一下，其实不难。所以做了一个简单的示例。
（一）标签每一行所显示的高度
（二）监听滚动条的监听事件
（三）设定一个值，用于判断是否符合条件然后加载下一批数据

实现效果

在Web页面中流式加载图片或数据

主要Js代码

<script>
$(function () {
    
    
    
    $(".container").scroll(function () {
    
    //开始监听滚动条
        scrollLoad.scrollChack();
    });

    var  scrollLoad={
    
    
        //模拟数据
         photo_arr:["/images/i1.png","/images/i2.png","/images/i3.png","/images/i4.png"],
        //滚动检查，滚动条的高度，是否符合条件
        scrollChack:()=>{
    
    
            //获取当前所有行中最后一行的eq索引
            var $treqIndex=$("#tableScroll tr").length-1;
            //获取当前所有行中最后一行的offsetTop坐标
            var curr_top =$("#tableScroll tr").eq($treqIndex).offset().top;
            //用于记录当前offsetTOP  【大家可以在web页面上将滚动条滑到底，根据这个值判断，取多少值合适】
            $("#curToptips").text(curr_top);
            //一列照片的height是180px ,初始行有4行,180*2=360px;+<h1>滚动条加载</h1>标签的高度大约477.5px
            //也就是当，当前高度小于385的时候就是到底了，那么这个时候就可以加载下一批图片了
             if(curr_top<478)
             {
    
    
                 //生成正在“加载中……”的提示标签
                scrollLoad.GenLoadGIFtr();
                //设置时间2.5s后生成下一批数据
                setTimeout(scrollLoad.GentrAndtd,2500);
             }
        }
        ,
        //生成正在“加载中……”的提示标签,并给他一个id标识，用于生成下一批数据之后清除它
        GenLoadGIFtr:()=>{
    
    
            let html='<tr id="load_gif">  <td colspan="6"><img class="Load-img" src="/images/Load1.gif"/><i>正在加载中……</i></td></tr>';
            $("#tableScroll").append(html);
        }
        ,
        //生成下一批数据图片
        GentrAndtd:()=>{
    
    
           let html = "<tr>";
            for (let i = 0; i < scrollLoad.photo_arr.length; i++) {
    
    
                for (let j = 0; j < 6; j++) {
    
    
                    html += ' <td><img src="' + scrollLoad.photo_arr[i] + '" /></td>';
                }
                html += "</tr>";
            }
            //删除加载中，标签
            $("#load_gif").remove();
            $("#tableScroll").append(html);
        }
     }

    })
</script>

当然，如果大家要想做个示例的，并且不嫌弃我代码的话，可以就用我这个来试一试吧！我把css,html代码帖出来

css 样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流式加载</title>
    <style>
        .container{
     
     
            width: 50%;
            position: absolute;
            margin-left: -25%;
            left: 50%;
            height: 580px;
            overflow-y: scroll;
            background: rgb(240,240,240);
        }

        table{
     
     
            width: 100%;
        }
        table td img{
     
     
          width: 100px;height: 180px;
        }
        .Load-img{
     
     
            margin-left: 40%;
            margin-right: 30px;
            display: inline-block;width: 20px;height: 20px;
        }
        table td  i{
     
     
            font-weight: 700;
            font-size: 20px;
            display:inline-block ; 
        }
    </style>
    <script src="/Jqmin.js"></script>
</head>

body 标签元素

<body>
    <h1>当前offset:<span id="curToptips"></span></h1>
    <div class="container"> <h1>滚动加载</h1>
    <table id="tableScroll">
        <tr>
            <td><img src="/images/i1.png" /></td>
            <td><img src="/images/i1.png" /></td>
            <td><img src="/images/i1.png" /></td>
            <td><img src="/images/i1.png" /></td>
            <td><img src="/images/i1.png" /></td>
            <td><img src="/images/i1.png" /></td>
        </tr>

        <tr>
            <td><img src="/images/i2.png" /></td>
            <td><img src="/images/i2.png" /></td>
            <td><img src="/images/i2.png" /></td>
            <td><img src="/images/i2.png" /></td>
            <td><img src="/images/i2.png" /></td>
            <td><img src="/images/i2.png" /></td>
        </tr>

        <tr>
            <td><img src="/images/i3.png" /></td>
            <td><img src="/images/i3.png" /></td>
            <td><img src="/images/i3.png" /></td>
            <td><img src="/images/i3.png" /></td>
            <td><img src="/images/i3.png" /></td>
            <td><img src="/images/i3.png" /></td>
        </tr>


        <tr>
            <td><img src="/images/i4.png" /></td>
            <td><img src="/images/i4.png" /></td>
            <td><img src="/images/i4.png" /></td>
            <td><img src="/images/i4.png" /></td>
            <td><img src="/images/i4.png" /></td>
            <td><img src="/images/i4.png" /></td>
        </tr>
        
    </table>
</div>
</body>

好了，基本就是这样了，其实也不难。当然这只是一个示例，比如要想弄一个加载更多的按钮放在在下面的，其实原理都是一样的，只是触发的条件更改了而已。
那如果要和后端结合的话，原理也是一样的。也相当于是一个分页的功能。设定一个公共变量的值为1，然后每次滑动到了一定的高度，再累加这个变量；用这个变量向服务器去要数据，然后再异步追加就好了。所以不管怎么去变，只要原理知道了，去举一反三就简单的多了。

在web中使用JQuery实现流式加载，不使用任何其他组件

前言

思路

猜你喜欢