滚动加载服务器端内容——例子

来源：互联网发布：informix sql 定义变量编辑：程序博客网时间：2024/06/03 15:47

网页代码如下

<!doctype html><html><head><meta charset="utf-8"><title>滚动加载</title><style>* {margin:0; padding:0; border:0;}#container {width:960px; margin:auto;}#container:after {display:block; height:0; content:''; clear:both;}.item {width:300px; height:200px; float:left; margin:10px; background-color:yellow;}</style></head><body><div id="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div>  <div class="item">8</div>  <div class="item">9</div>  <div class="item">10</div>  <div class="item">11</div>  <div class="item">12</div></div><script>var time = new Date() * 1;  // 获取当前时间数值window.onscroll = function(){h_window = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 获取视口高度h_document = document.documentElement.scrollHeight || document.body.scrollHeight;  // 获取网页高度h_scroll = document.documentElement.scrollTop || document.body.scrollTop;  // 获取页面的滚动高度var times = 0; // 成功请求的次数var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4){if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){// 在container最后一个子元素后面插入返回的HTML代码document.getElementById('container').insertAdjacentHTML('beforeEnd', xhr.responseText);times++;}}};xhr.open('get', 'scrolltoload.php', true);// 当 此次滚动于上次滚动间隔大于100毫秒 且 页面滚动高度+视口高度 > 网页高度 - 一个固定数值 时，加载新内容if((new Date() * 1 - time > 100) && (h_window + h_scroll > h_document - 50)){time = new Date() * 1;xhr.send(null);}};</script></body></html>

php文件代码如下

<div class="item">Ajax1</div><div class="item">Ajax2</div><div class="item">Ajax3</div><div class="item">Ajax4</div><div class="item">Ajax5</div><div class="item">Ajax6</div>

1 0