1)不清除你的不能加载了是个什么样的状况~~
2)从代码上看,是有问题的
* 因为ajax是个异步请求,那么当你第1次滚动到底部,发送了ajax请求还没有回来数据的时候,你上拉下再滚动到底部,又会触发一次scroll事件。也就是说如果你的ajax请求实际时间长,并在次工程中反复的滚动页面,ajax请求会越积越多~~。解决方法为当前一次ajax请求回来后在允许相应下一次scroll事件
* 既然使用了jQuery,为什么不把JS放在```$(function(){})```documentonready回调中呢
* style为什么不放在head标签里
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../script/jquery-2.1.3.min.js"></script>
<style type="text/css">
.con{
border-style: solid;
border-color: red;
width: 500px;
height: 350px;
}
</style>
<script>
$(function(){
//添加内容
var appendNewDiv=(function(){
var currentLength=$('div#add div.class').length;
return function(){
currentLength++;
//追加进id为add的class
$('#add').append('<div class="con">测试内容'+currentLength+'</div>');
}
}());
//滚动处理函数
var loadingNewDiv=(function(){
var isLoadingFlag=false;
return function(){
if(isLoadingFlag){//页面已经在loading加载数据了,那么此次scroll事件就忽略
return;
}
var scrollTop = $(this).scrollTop(); //获取、判断高度
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
console.log("已经到最底部了!");
//代替ajax请求,实现相同的效果
setTimeout(function(){
appendNewDiv();
isLoadingFlag=false;//标识数据已经加载完毕,可以触发下一个scroll
},2000)
}
};
}());
$(window).scroll(function(){
loadingNewDiv.apply(this,Array.prototype.slice(arguments,0));
});
});
</script>
</head>
<body>
<div id="add">
<div class="con">
测试内容1
</div>
<div class="con">
测试内容2
</div>
<div class="con">
测试内容3
</div>
</div>
</body>
</html>
我测试了你的代码,只修改了jquery和ajax部分,在chrome下没有问题:
我在ajax结果中,加了索引:
你在什么环境测试的呢?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
.con{
border-style: solid;
border-color: red;
width: 500px;
height: 220px;
}
</style>
<body>
<div id="add">
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
<div class="con">
测试内容
</div>
</div>
</body>
<script>
var index = 1;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //获取、判断高度
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
alert("已经到最底部了!");
//如果不懂ajax的话可以去熟悉一下
$.ajax({
type: "GET", //提交方式 GET 或 POST
url: "Test.php", //提交的php脚本
data: {
username:$("#username").val(), //提交的数据可以为空
content:$("#content").val()
},
dataType: "html", //返回的类型 还可以是 json格式
success: function(data){ //成功后返回的数据
//这里可以对data进行处理
$('#add').append('<div class="con">测试内容' + index++ + '</div>'); //追加进id为add的class
}
});
}
});
</script>
</html>
----------
test.php
<?php
echo '测试内容';