Javascript 滚动加载区域数据 （非jQuery）
// ————————————————————————————————
// 0。0
// ————————————————————————————————
// 早晨的空气多么清晰，起来喝杯咖啡，吃点早点，休闲一下，上次在某个站点有滚动加载内容，况且星期天休息，手写一份拿个大家分享研究下，不是jQuery的，习惯纯代码，
//准备成为古董了，hoho。
// ————————————————————————————————
// 1。 简介
// ————————————————————————————————
//
// 有些站点通过window.onscroll 滚动来加载内容，而且为了每次能保证内容能完全加载，在内容区域下放置按钮，本章共 2 节。
// 本小节 介绍 Javascript 滚动加载内容 之 window.onscroll 事件加载内容 , 突出其他站点内容滚动加载原理。
//
// ————————————————————————————————
// 2。 分析滚动原理（如果无滚动条，就无法触发该事件，将由下小节介绍）
// ————————————————————————————————
//
// 当我们在滚动游览器滚动条会触发 window.onscroll 滚动事件，来加载内容
// 当我们抛弃所有限制代码，那么就剩下 window.onscroll 滚动事件，就立即触发加载内容
//
// window.onscroll -> 判断每次滚动是否到页面底部 -> 准备加载,初始化其他数据
//
// ————————————————————————————————
// 3。 知识点
// ————————————————————————————————
//
// new Object() 空项目；
// with 对的元素相同属性缩码
// window.onscroll 滚动事件
// document.createElement 创建元素
// parseInt 转化为整型
// window.setTimeout window.clearTimeout 对称关系，有设置set就要清除clear
// Math.max 比较大小，取最大值返回
// 两个数字之间求余 使用“%”
// ————————————————————————————————
// 4。 代码如下
// ————————————————————————————————
//
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>Javascript 滚动加载区域数据 （非jQuery）</title> 6 </head> 7 8 <body> 9 <table width="950" border="1" align="center" cellpadding="0" cellspacing="0" id="Table"> 10 <tr> 11 <td> </td> 12 <td> </td> 13 <td> </td> 14 </tr> 15 <tr> 16 <td> </td> 17 <td> </td> 18 <td> </td> 19 </tr> 20 <tr> 21 <td> </td> 22 <td> </td> 23 <td> </td> 24 </tr> 25 <tr> 26 <td> </td> 27 <td> </td> 28 <td> </td> 29 </tr> 30 <tr> 31 <td> </td> 32 <td> </td> 33 <td> </td> 34 </tr> 35 <tr> 36 <td> </td> 37 <td> </td> 38 <td> </td> 39 </tr> 40 <tr> 41 <td> </td> 42 <td> </td> 43 <td> </td> 44 </tr> 45 <tr> 46 <td> </td> 47 <td> </td> 48 <td> </td> 49 </tr> 50 <tr> 51 <td> </td> 52 <td> </td> 53 <td> </td> 54 </tr> 55 <tr> 56 <td> </td> 57 <td> </td> 58 <td> </td> 59 </tr> 60 <tr> 61 <td> </td> 62 <td> </td> 63 <td> </td> 64 </tr> 65 <tr> 66 <td> </td> 67 <td> </td> 68 <td> </td> 69 </tr> 70 <tr> 71 <td> </td> 72 <td> </td> 73 <td> </td> 74 </tr> 75 <tr> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 </tr> 80 <tr> 81 <td> </td> 82 <td> </td> 83 <td> </td> 84 </tr> 85 <tr> 86 <td> </td> 87 <td> </td> 88 <td> </td> 89 </tr> 90 <tr> 91 <td> </td> 92 <td> </td> 93 <td> </td> 94 </tr> 95 <tr> 96 <td> </td> 97 <td> </td> 98 <td> </td> 99 </tr> 100 <tr> 101 <td> </td> 102 <td> </td> 103 <td> </td> 104 </tr> 105 <tr> 106 <td> </td> 107 <td> </td> 108 <td> </td> 109 </tr> 110 </table> 111 112 <script> 113 var obj = new Object(); 114 obj.IsGetData = false; //是否存在数据加载 115 obj.Time = 0; //时间声明(模拟) 116 obj.Index = 1; //编码序号 117 obj.div=null; 118 //------------------------------- 119 // 名 称：window.onscroll， 120 // 描 述：游缆器滚动事件 121 //------------------------------- 122 window.onscroll = function() { 123 if (uiIsPageBottom() && !obj.IsGetData) { 124 //状态; 125 obj.IsGetData = true; 126 127 // 知识点：document.createElement 创建元素 128 // 加载进度条 129 var div = document.createElement("div"); 130 div.innerHTML = "正在加载数据中..." + obj.Index; 131 with(div.style) { 132 position = "absolute"; 133 left = "0px"; 134 height = "auto"; 135 width = "auto"; 136 fontSize = "12px"; 137 backgroundColor = "#666666"; 138 color = "#FFFFFF"; 139 // 知识点：parseInt 转化为整型 140 // 对元素滚动定位处理 141 top = parseInt(document.documentElement.scrollTop, 10) + "px"; 142 } 143 document.body.appendChild(div); 144 obj.div = div; 145 //模拟Ajax加载; 146 obj.Time = window.setTimeout('GetAjaxData()', 3000); //模拟Ajax加载;使用Ajax数据注释掉本行 147 } 148 if (obj.IsGetData) { 149 obj.div.style.top = parseInt(document.documentElement.scrollTop, 10) + "px"; 150 } 151 } 152 //------------------------------- 153 // 名 称：GetAjaxData 154 // 描 述：模式Ajax加载数据 155 //------------------------------- 156 function GetAjaxData() { 157 // 知识点：cloneNode(true) 克隆元素 158 var table = document.getElementById("Table").cloneNode(true); 159 // 用于渐变内容区分，知识点： 两个数字之间求余 使用“%” 160 table.style.backgroundColor= (obj.Index%2==0?"#999999":"#FFFFFF"); 161 document.body.appendChild(table); 162 //状态 163 if (true) { 164 // 知识点： window.setTimeout window.clearTimeout 对称关系，有设置set就要清除clear 165 // (时间长了耗费系统内存,有可能回导致IE崩溃,所以清除时间点,使用Ajax返回数据注释掉本行) 166 if (obj.Time != 0) window.clearTimeout(obj.Time); 167 document.body.removeChild(obj.div); 168 } 169 obj.IsGetData = false; 170 obj.Index++; 171 } 172 //------------------------------- 173 // 名 称：uiIsPageBottom 174 // 描 述：判断是滚动到页面底部 175 //------------------------------- 176 function uiIsPageBottom() { 177 var scrollTop = 0; 178 var clientHeight = 0; 179 var scrollHeight = 0; 180 if (document.documentElement && document.documentElement.scrollTop) { 181 scrollTop = document.documentElement.scrollTop; 182 } else if (document.body) { 183 scrollTop = document.body.scrollTop; 184 } 185 if (document.body.clientHeight && document.documentElement.clientHeight) { 186 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; 187 } else { 188 clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight; 189 } 190 // 知识点：Math.max 比较大小，取最大值返回 191 scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 192 if (scrollTop + clientHeight == scrollHeight) { 193 return true; 194 } else { 195 return false; 196 } 197 } 198 </script> 199 </body> 200 </html>
