javascript - 高手大牛给我看看，拉动到最后怎么不加载了-PHP Tutorial-php.cn

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

WBOY

Release： 2016-06-06 20:23:11

Original

1419 people have browsed it

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

Copy after login

回复内容：

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

Copy after login

1）不清除你的不能加载了是个什么样的状况~~
2）从代码上看，是有问题的

<code>* 因为ajax是个异步请求，那么当你第1次滚动到底部，发送了ajax请求还没有回来数据的时候，你上拉下再滚动到底部，又会触发一次scroll事件。也就是说如果你的ajax请求实际时间长，并在次工程中反复的滚动页面，ajax请求会越积越多~~。解决方法为当前一次ajax请求回来后在允许相应下一次scroll事件
* 既然使用了jQuery,为什么不把JS放在```$(function(){})```documentonready回调中呢
* style为什么不放在head标签里
</code>

Copy after login

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

Copy after login

我测试了你的代码，只修改了jquery和ajax部分，在chrome下没有问题：
javascript - 高手大牛给我看看，拉动到最后怎么不加载了
我在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>

Copy after login