手机上下拉自动加载内容的疑问

Squall001 2017-04-14 11:04:50

也就是类似下拉自动加载留言，我只是想做个加载提示，用ajax
下面上页面代码



<h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3>

<h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3>

<div id="addcontent">

    @*用于内容加载的DIV*@

</div>



<div id="loaddiv" style="height:80px; display:none;">

    <p><h1>正在加载</h1></p>

</div>

<script type="text/javascript">

    //手机浏览器自带节流阀，对scroll事件响应要比PC端慢很多。。。

    var i = 1;

    var trigger = true; //滚动开关

    var winH = $(window).height();

    $(window).scroll(scrollHandler);//绑定滚动事件



    function scrollHandler() {       

        if (trigger == false)

            return;        

        var pageH = $(document.body).height();

        var pageIH = $(document.body).innerHeight();

        var scrollT = $(window).scrollTop(); //滚动条top   

        var aa = (pageH - winH - scrollT) / winH;

        if (aa < 0.4) {//在手机上面 滚动条拉到底也就是0.35，我也不知道为什么  

            //alert("scrolling  "+ aa);

            trigger = false;

            getData(i);

        }

    }

    function getData(pagenumber) {

        i++; //页码自动增加，保证下次调用时为新的一页。  

        $.ajax({

            type: "post",

            url: "/MainPage/getData",

            data: {},

            async: false,

            dataType: "json",

            success: function (data) {

                $("#loaddiv").css("display", "none");

                var $add = $("#addcontent");

                var html = "<h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3><h3>MainPage</h3>";

                $add.append(html);

                trigger = true;

            },

            beforeSend: function () {

                $("#loaddiv").css("display", "block");

                trigger = false;

            },

            error: function () {

                $("#loaddiv").hide();

                alert("error");

            }

        });



    }

</script>

现在的问题是在PC端浏览器，滚动条拉到下面后，能够出现 id="loaddiv"这个DIV，但是再手机上无论如何拉倒底了，就自动加载了，无论如何都不能出现这个DIV
我把源码已经弄到以下测试地址，http://pp.cqyyny.cn/mainpage/mainpage

求解释，或者变通的方法，实现在加载的时候，页面底部出现DIV，我准备弄个GIF图片动画来表示正在加载。。。。

...全文