Js实现页面延迟加载

方法一：DIV判断法，就是在页脚底部放置一个DIV，然后判断如果滚动条接近该DIV即继续加载数据。

 

/******************************** 页面延迟加载开始 ********************************/

function BottomCheck() {

    var obj = document.getElementById('BottomPage'); //页脚div，用于判断是否浏览到了页脚

    var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;

    var scrollTop = dom.scrollTop || document.body.scrollTop || 0;

    if (obj.offsetTop - scrollTop - dom.clientHeight < 100) {

//        alert("开始AJAX加载数据了！");

        yanchiLoad();

    }

    else {

        setTimeout("BottomCheck()", 1000);

    }

}

setTimeout("BottomCheck()", 1000);

function yanchiLoad()

{

    var page,pagenum;

    var addPage=1,addPagenum=9;

    var inputHidden = document.getElementById("ListPara");

    var paraArr=(inputHidden.value).split(',');

    if(paraArr.length >= 2)

    {

        for(var i=0;i<paraArr.length;i+=2)

        {

            if(paraArr[i]=="page")

            {

                page=parseInt(paraArr[i+1]);//记录当前信息数量

            }

            if(paraArr[i]=="pagenum")

            {

                pagenum=parseInt(paraArr[i+1]);//记录当前信息数量

            }

        }

    }

    inputHidden.value="page,"+page+",pagenum,"+(pagenum+addPagenum); //隐藏控件记录参数

    getParametersStr(page,(pagenum+addPagenum)); //加载数据的方法

}

/******************************** 页面延迟加载结束 ********************************/

方法二：滚动条判断法，判断滚动条滚动到某个位置开始加载数据。

 

var pageNo = 1, totalPage = 267, t = null;

var isScrollToBottom = function(height) {

    height = height || 88;

    var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;

    var scrollHeight = Math.max(dom.scrollHeight, document.body.scrollHeight), scrollTop = dom.scrollTop || document.body.scrollTop || 0;

    return ((scrollTop + document.documentElement.clientHeight) > scrollHeight - height)

};

function loadContent() {

    pageNo++;

    if (pageNo > totalPage) { return; }

    alert(pageNo);

//    $.getJSON('strJson.aspx?pn=' + pageNo + '&t=' + encodeURI(v), function(result) {

//        aaa(result);

//        Waterfall.show(result);

//        totalPage = result.totalPages;

//        $('section.waterfall').masonry('reload');

//        t = null;

//    });

}

function scroll() {

    $(window).on('scroll', function() {

        if (pageNo >= totalPage) {

            $('#loading').html('哎呀，见底啦！');

            return false;

        } else {

        $('#loading').html('<span>亲，我们正在很努力地加载 <img src="../App_Themes/images/ajax-loader.gif" /> </span>');

        }

        if (t === null && isScrollToBottom(88)) {//当滚动条至什么位置时开始加载数据

            t = setTimeout('loadContent()', 288);

        }

    });

}

scroll();