JS滚动加载

ahead_zhan

浏览: 28763 次
性别:
来自: 深圳

最近访客更多访客>>

YS丶yang

wc520174

小程序猿

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

通过window.onscroll 滚动来加载内容

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>Javascript 滚动加载区域数据 （非jQuery）</title>
 </head>
 
 <body>
 <table width="950" border="1" align="center" cellpadding="0" cellspacing="0" id="Table">
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
 </table>
 
 <script>
 var obj = new Object();
 obj.IsGetData = false; //是否存在数据加载
 obj.Time = 0; //时间声明(模拟)
 obj.Index = 1; //编码序号
 obj.div=null;
 //-------------------------------
 // 名 称：window.onscroll，
 // 描 述：游缆器滚动事件
 //-------------------------------
 window.onscroll = function() {
     if (uiIsPageBottom() && !obj.IsGetData) {
         //状态;
         obj.IsGetData = true;
         
         // 知识点：document.createElement 创建元素
         // 加载进度条
         var div = document.createElement("div");
         div.innerHTML = "正在加载数据中..." + obj.Index;
         with(div.style) {
             position = "absolute";
             left = "0px";
             height = "auto";
             width = "auto";
             fontSize = "12px";
             backgroundColor = "#666666";
             color = "#FFFFFF";
             // 知识点：parseInt 转化为整型
             // 对元素滚动定位处理
             top = parseInt(document.documentElement.scrollTop, 10) + "px";
         }
         document.body.appendChild(div);
         obj.div = div;
         //模拟Ajax加载;
         obj.Time = window.setTimeout('GetAjaxData()', 3000); //模拟Ajax加载;使用Ajax数据注释掉本行
     }
     if (obj.IsGetData) {
         obj.div.style.top = parseInt(document.documentElement.scrollTop, 10) + "px";
     }
 }
 //-------------------------------
 // 名 称：GetAjaxData
 // 描 述：模式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;
     obj.Index++;
 }
 //-------------------------------
 // 名 称：uiIsPageBottom
 // 描 述：判断是滚动到页面底部
 //-------------------------------
 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;
     }
 }
 </script>
 </body>
 </html>

分享到：