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

最新推荐文章于 2024-04-21 14:30:45 发布

rrdawlx

最新推荐文章于 2024-04-21 14:30:45 发布

阅读量688

点赞数 1

分类专栏： Web前端文章标签： javascript ajax 滚动加载

本文链接：https://blog.csdn.net/wlx1991/article/details/44263121

版权

Web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

网页代码如下

<!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>

rrdawlx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动加载服务器端内容——例子

网页代码如下滚动加载* {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
复制链接

扫一扫