直播平臺搭建，JS實現頁面下拉載入資料操作

前端頁面程式碼如下，我用的PHP，HTML頁面應該就行，主要是在id="ph"的div內載入資料：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<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("{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張圖片。

以上就是直播平臺搭建，JS實現頁面下拉載入資料操作，更多內容歡迎關注之後的文章

直播平臺搭建，JS實現頁面下拉載入資料操作

相關文章