Home > Article > Backend Development > javascript - 高手大牛给我看看,拉动到最后怎么不加载了
<code> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.7.2.js"></script> <style type="text/css"> .con{ border-style: solid; border-color: red; width: 500px; height: 350px; } </style> <div id="add"> <div class="con"> 测试内容 </div> <div class="con"> 测试内容 </div> <div class="con"> 测试内容 </div> </div> <script> $(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(data); //追加进id为add的class } }); } }); </script> ---------- test.php <?php echo '测试内容';</code></code>
<code> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.7.2.js"></script> <style type="text/css"> .con{ border-style: solid; border-color: red; width: 500px; height: 350px; } </style> <div id="add"> <div class="con"> 测试内容 </div> <div class="con"> 测试内容 </div> <div class="con"> 测试内容 </div> </div> <script> $(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(data); //追加进id为add的class } }); } }); </script> ---------- test.php <?php echo '测试内容';</code></code>
1)不清除你的不能加载了是个什么样的状况~~
2)从代码上看,是有问题的
<code>* 因为ajax是个异步请求,那么当你第1次滚动到底部,发送了ajax请求还没有回来数据的时候,你上拉下再滚动到底部,又会触发一次scroll事件。也就是说如果你的ajax请求实际时间长,并在次工程中反复的滚动页面,ajax请求会越积越多~~。解决方法为当前一次ajax请求回来后在允许相应下一次scroll事件 * 既然使用了jQuery,为什么不把JS放在```$(function(){})```documentonready回调中呢 * style为什么不放在head标签里 </code>
<code> <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+''); } }()); //滚动处理函数 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> <div id="add"> <div class="con"> 测试内容1 </div> <div class="con"> 测试内容2 </div> <div class="con"> 测试内容3 </div> </div> </code>
我测试了你的代码,只修改了jquery和ajax部分,在chrome下没有问题:
我在ajax结果中,加了索引:
你在什么环境测试的呢?
<code> <meta charset="utf-8"> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .con{ border-style: solid; border-color: red; width: 500px; height: 220px; } </style> <div id="add"> <div class="con"> 测试内容 </div> <div class="con"> 测试内容 </div> <div class="con"> 测试内容 </div> </div> <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++ + ''); //追加进id为add的class } }); } }); </script> ---------- test.php <?php echo '测试内容'; </code></code>