頁面懶加載

一、懶加載之鼠標滾動

　　懶加載，顧名思義，就是這個頁面比較的lazy，有活不是一次性的干完，不催他，他就得過且過！

　　1.頁面剛打開的時候發送一次請求，獲取到一部分數據由於渲染頁面，

　　2.用戶鼠標滾動到頁面的下端，即第一次加載的數據用戶看完了，

　　3.給body添加一個事件onscroll 即鼠標滾輪觸發，這樣我們就可以時時檢測到用戶看到了什么位置

　　4.定義一個標准，我是拿看到了最后一條來算的，你也可以給不同的判斷條件，這塊是非常靈活的

　　5.再次向后台請求數據然后得到數據渲染頁面，給用戶呈現新的數據

簡單的說一下好處吧：

　　　　對於用戶 ：每次加載一部分的資源，使得那些看一眼就走的用戶剩下了許多的流量

　　　　對於瀏覽器 ：當打開一個頁面的時候需要加載很多的元素，瀏覽器的壓力那是很大的，資源的分布加載可以使瀏覽器加載頁面時候的壓力不是那么的大

　　首先獲取數據那就是 AJAX了 或者你也可以使用 jsonp 這里拿ajax舉例

　　先簡單的封裝一個AJAX

 

//封裝對象向后台發送請求獲取數據 定義一個變量保存數據加載的位置
        var Unit = {
            //參數 第一個 發送請求的地址 第二個是數據加載完成之后的回調函數
            ajax: function(url,callback){
                var xhr = new XMLHttpRequest();
                xhr.onload=function(){
                    var data = JSON.parse(this.responseText);
                    callback(data);
                }
                xhr.open("GET",url,true);
                xhr.send(null);
            },
            num : 0
        }

 

　　這里的num是關鍵 他幫我記錄着我請求到了第多少條的數據 由於后台的php代碼是我自己寫的 我自己和自己一小 琢磨就定下來了 ！

 

在來一個檢測是否瀏覽到底部的函數

//鼠標滾動早最下邊自動加載數據
        body.onscroll=function(ev){
            //document.documentElement.scrollTop 頁面滾動上去的高度
            //this.innerHeight 屏幕的高度
            if(document.documentElement.scrollTop + this.innerHeight > item.offsetHeight + item.offsetTop){
                 upload(); //滿足條件 即滾動到頁面最下端 執行獲取數據的函數
            }
        }

 

　　

　　向頁面加載什么的我就不仔細的說了直接上代碼了要是有什么不理解的留言交流哈

 

　　

//把數據渲染到頁面的函數
        function creatElement(data){
            for(var i in data){ // 便利數據 向頁面動態插入元素
                Unit.num++
                var li = document.createElement("li");
                li.innerHTML = data[i];
                if(data[i]==="沒有了"){ // 判斷數據是否全部加載完畢 全部加載完畢之后不再檢測鼠標滾輪
                        body.onscroll=null;
                    }
                item.appendChild(li);
            }
        }

 

　　

　　當然了后台的代碼也拿出來吧 很簡單的

　　　　

<?php
    $dataArray = array();
    for($i=0; $i<100;$i++){
        $dataArray[] = array("甘慧琳$i");
    }
    $number = 20; //每次頁面跟新出的信息的條數
    if(!empty($_GET)){
        $upArray = array(); // 定義一個數組保存本次返回的數據
        $num = intval($_GET["num"]);
        for($i=0;$i<$number;$i++){
            if(!empty($dataArray[$num+$i])){ // 判斷數據是否還有
                $upArray[] = $dataArray[$num+$i];
            }else{ // 數據沒有了 讓頁面顯示沒有了
                $upArray[] = "沒有了";
                break;
            }
        }
        echo json_encode($upArray);
    }

?>

 

 

 

　二、我們再來談一談新聞等信息的分頁加載

　　這個在現在還是墳場非常多的啊，所以簡單的記錄下一下，僅是我自己的想法我而已，希望看到的博友們多多提意見多多交流

　　　　

　　　　首先我們還是來分析一下子效果

　　　　　　　1.頁面剛剛加載，新聞什么的只請求第一頁的數據，瀏覽器只渲染第一頁的效果

　　　　　　　2.用戶點擊頁碼，給每一個頁碼都添加一個點擊事件，點擊頁碼，向后台發送請求，獲取本頁的數據，拿到數據渲染頁面

　　　　　　　3.前后台對接 

　　　　　　　　大概就這些

　　

            var totalNum = 20;//總頁數 totalPage
        var pageSize = 3;//每頁顯示數量 pageSize
        totalPage = Math.ceil(totalNum/pageSize);  //計算總頁數
        function creatPageIndex(pageIndex){
            //總共9頁頁碼
            //當前頁顯示在中間 
            pageIndex = parseInt(pageIndex) - 1;
            var start = pageIndex - 4 > 0 ? pageIndex - 4 : 0 ;
            var end = pageIndex + 4 < totalPage ? pageIndex + 4 : totalPage;
            end = end - start > 8 ? end : start + 9;
            if(end === totalPage){
                start = end - 8;
            }
            pagenav.innerHTML = ""; 
            for(var i =start;i<end;i++){
                var a = document.createElement("a");
                a.innerText= i+1;
                a.type = "a";
                a.dataset.page = i+1;
                pagenav.appendChild(a);
            }
            changeColor(number,pageIndex); // 改變被選中的按鈕的顏色的函數
            number = pageIndex;
        }

　　

　　　　

//改變備選中的頁面的顏色
        function changeColor(num,pageIndex){
            var li = document.getElementsByTagName("a");
            num = num > 4 ? 4 : num; 
            li[num].style.backgroundColor = "white";        
            li[num].style.color = "black";
            var count = pageIndex > 4 ? 4 : pageIndex;
            li[count].style.backgroundColor = "red";
            li[count].style.color = "white";
        }

　　

　　　　

//頁面加載顯示第一頁
        window.onload=function(){
            var xhr = new XMLHttpRequest();
            creatPageIndex(1);
            xhr.onload=function(){
                var data = JSON.parse(this.responseText);
                 creatLi(data);
                 array[1]= data;
            }
            var Url = "news.php?pageIndex=" + 1 ;
            xhr.open("get",Url,true);
            xhr.send(null);
        }

 

 

　　

//向后台傳送頁碼 獲取當前頁面的數據
        function ViewNews(ev){
            if(ev.target.type==="a"){
                var pages = ev.target.dataset.page;
                createPageNav(pages);
                if(array[pages]){
                    creatLi(array[pages]);
                    return;
                }
                var xhr = new XMLHttpRequest();
                xhr.onload=function(){
                    creatPageIndex(pages);
                    var data = JSON.parse(this.responseText);
                    array[pages] = data;
                     creatLi(data);
                }
                var Url = "news.php?pageIndex=" + pages ;
                xhr.open("get",Url,true);
                xhr.send(null);
            }
        }

 

 

　　　　

//添加每一條新聞
        function creatLi(data){
            document.getElementById("haha").innerHTML = "";
                for(var i=0;i<data.length;i++){
                    var li = document.createElement("li");
                    li.innerText = data[i];
                    document.getElementById("haha").appendChild(li);
                }
        }

 

 

　　后台的php代碼

　　　　

?php
    //
    $news = array();
    for($i =0 ; $i< 1000;$i++){
         $news[] = array("新聞$i");
    }
    //pageIndex 第幾頁的新聞
    //pageIndex = 3
    //    pageSize = 3
    //start 開始
    if(!empty($_GET)){
        $pageIndex = $_GET["pageIndex"]?intval($_GET["pageIndex"]):1;
        $pageSize = 3;
        $srart = ($pageIndex-1)*$pageSize;
        $outNews = array();
        for($i=0;$i<3;$i++){
            if(!empty($news[$srart+$i])){
                $outNews[] = $news[$srart+$i];
            }
        }
        echo json_encode($outNews);
    }