Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > 原始JS滚动加载
隐藏/显示侧边栏

原始JS滚动加载

2015-05-26 11:34    来源:未知    责任编辑:admin    字号【
通过window.onscroll 滚动来加载内容

滚动游览器滚动条会触发 window.onscroll 滚动事件,来加载内容
抛弃所有限制代码,那么就剩下 window.onscroll 滚动事件,就立即触发加载内容

window.onscroll -> 判断每次滚动是否到页面底部 -> 准备加载,初始化其他数据

new Object() 空项目;
with 对的元素相同属性缩码
window.onscroll  滚动事件
document.createElement  创建元素
parseInt 转化为整型
window.setTimeout window.clearTimeout 对称关系,有设置set就要清除clear
Math.max 比较大小,取最大值返回
两个数字之间求余 使用“%”

var obj = new Object();  
obj.IsGetData = false; //是否存在数据加载  
obj.Time = 0; //时间声明(模拟)
// 描 述:游缆器滚动事件  
window.onscroll = function() {  
    if (uiIsPageBottom() && !obj.IsGetData) {  
        //状态;  
        obj.IsGetData = true;  
        //模拟Ajax加载;  
        obj.Time = window.setTimeout('GetAjaxData()', 3000); //模拟Ajax加载;使用Ajax数据注释掉本行  
    }   
}
// 描 述:模式Ajax加载数据  
function GetAjaxData() {  
    // 知识点:cloneNode(true) 克隆元素  
    var table = document.getElementById("Table").cloneNode(true);  
    // 用于渐变内容区分,知识点: 两个数字之间求余 使用“%”  
    table.style.backgroundColor= (obj.Index%2==0?"#999999":"#FFFFFF");  
    document.body.appendChild(table);  
    //状态  
    if (true) {  
         // 知识点: window.setTimeout window.clearTimeout 对称关系,有设置set就要清除clear  
         // (时间长了耗费系统内存,有可能回导致IE崩溃,所以清除时间点,使用Ajax返回数据注释掉本行)  
        if (obj.Time != 0) window.clearTimeout(obj.Time);   
        document.body.removeChild(obj.div);  
    }  
    obj.IsGetData = false;
}  
// 描 述:判断是滚动到页面底部  
function uiIsPageBottom() {  
    var scrollTop = 0;  
    var clientHeight = 0;  
    var scrollHeight = 0;  
    if (document.documentElement && document.documentElement.scrollTop) {  
        scrollTop = document.documentElement.scrollTop;  
    } else if (document.body) {  
        scrollTop = document.body.scrollTop;  
    }  
    if (document.body.clientHeight && document.documentElement.clientHeight) {  
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  
    } else {  
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  
    }  
    // 知识点:Math.max 比较大小,取最大值返回  
    scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);  
    if (scrollTop + clientHeight == scrollHeight) {  
        return true;  
    } else {  
        return false;  
    }  
}

转载:http://www.oschina.net/code/snippet_115029_20471

更多
Tags 标签: 滚动加载
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |