页面懒加载

一、懒加载之鼠标滚动

　　懒加载，顾名思义，就是这个页面比较的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);
    }