Home  >  Article  >  Backend Development  >  javascript - 高手大牛给我看看,拉动到最后怎么不加载了

javascript - 高手大牛给我看看,拉动到最后怎么不加载了

WBOY
WBOYOriginal
2016-06-06 20:23:111389browse

<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下没有问题:
javascript - 高手大牛给我看看,拉动到最后怎么不加载了
我在ajax结果中,加了索引:
javascript - 高手大牛给我看看,拉动到最后怎么不加载了
你在什么环境测试的呢?

<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>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn