JS实现页面下拉加载数据操作

最近研究了下JS实现下拉加载数据的操作，写一下分享给大家。
前端页面代码如下，我用的PHP，HTML页面应该就行，主要是在id="ph"的div内加载数据：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/test.js?v=<?php echo($_Version_); ?>"></script>
</head>
<body>
<div id="ph" align="center">
<!-- 这里是加载的内容区域-->
</div>
<div align="center">
    <img id="img_load" src="http://www.lkhk.life/images/loading.svg" width="60" style="display: none">
</div>
</body>
</html>

js代码功能如下：

var num_pages = 50;       //总页数，也是拉下加载的次数
var current_page = 1;    //当前页数，不能超过总页数

var timers = null;      //定义一个定时器
var srcoll_flag = true; // 定义一个开关，等会用来控制多次触发

//初始化页面,页面第一次加载时或者刷新时会执行
window.onload=function(){
    
    
    page_loadmore(current_page);//默认加载一次图片，这段代码可以不要
};

//监测下拉操作，执行拉下函数加载数据
$(window).scroll(function() {
    
    
    var scrollTop = $(this).scrollTop();        //浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
    var scrollHeight = $(document).height();    //整个文档高度
    var windowHeight = $(this).height();        //浏览器可视窗口高度
    if (scrollTop + windowHeight + 60 >= scrollHeight) {
    
    
        // 此处是滚动条距离底部60px时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        if(srcoll_flag == true){
    
        //检测下拉开关是否打开状态，如果是则执行下拉操作
            srcoll_flag = false;    //关闭下拉开关

            //***********可以定义自己的拉下操作***************
            if(current_page <= num_pages){
    
      //如果不是最后一页，则执行下拉参数
                $("#img_load").css('display','block'); //显示loading图标提醒加载动作
                clearTimeout(timers);
                timers = setTimeout(function(){
    
    
                    page_loadmore();// 发现拉下操作，执行下拉函数
                },500);
            }
            //*********************************************

        }
    }
});

//加载数据函数
function page_loadmore() {
    
    
    $("#img_load").css('display','none'); //隐藏加载图标，开始加载数据
    //***********可以修改为自己的下拉操作函数************
    $.getJSON("http://lkhk.life/JBRH/mm.php?jsoncallback=?",{
    
    nums:3,sid:Math.random()},function (json) {
    
    
        for(i in json){
    
    
            $("#ph").append("<img width='750' src='"+json[i].imagepath+"'><br><p>");
        }
    });
    current_page++;
    //***********************************************
    clearTimeout(timers); //先清除定时器。执行
    timers = setTimeout(function(){
    
    
        srcoll_flag = true;
    },1000);    //1秒后再打开下拉开关，防止多次操作，很重要
}

功能描述：每次下拉会加载3张图片。
PS：下拉触发时会显示loading图标提示即将开始加载数据。
程序已打包：https://pan.baidu.com/s/1xS0O4445EDcwVNxUO6cSZA 密码:b93q

JS实现页面下拉加载数据操作

猜你喜欢