• JQuery ajax 滚动底部加载更多


    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.IO" %>
    <%@ Import Namespace="System.Net" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    
    <!DOCTYPE html>
    <script runat="server">
      
        protected override void OnLoad(EventArgs e)
        {
            Response.Write("" + DateTime.Now.Ticks + "       " + pn.Value);
        }
        
    </script>
    
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="jquery下载,实时更新jquery1.2到最新3.4.1所有版本下载" />
        <meta name="keywords" content="jquery下载" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="renderer" content="webkit" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <title>---------------</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:HiddenField ID="pn" runat="server" Value="1" />
                <asp:Button ID="btn1" Name="btn1" runat="server" Text="fffffffffffffff" Height="51px" Width="224px" />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <p>uuuuuuuuuuuuuuuuuuu</p>
    
       <div id="goods">
                </div>
          
            </div>
        </form>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    
    
        <div id="pp" style="position: fixed; top: 0px; right: 4px;">
        </div>
        <script type="text/javascript">
            var pageNumber = 1;
            //alert(window.innerHeight);
            // scroll at bottom
            //jquery
            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = document.body.clientHeight; //$(this).height();//document.body.clientHeight;
                $("#pp").html(" scrollTop: " + scrollTop + "<br/>scrollHeight: " + scrollHeight + "<br/>windowHeight:" + windowHeight);
    
                if (scrollTop + windowHeight > scrollHeight - 100) {
                   // alert("已经到最底部了!");
                    loadPageData();
                }
            });
    
            var isLoadComplete = true;
            function loadPageData() {
                if (isLoadComplete == false) { return; }
                isLoadComplete = false;
                var url = '/index.asp?page=' + pageNumber;   
      
                $.ajax({
                    url: url,
                    dataType: 'text',
                    success: function (data) {
                       // alert("ok");
                       // $("#pp").html(data);
                        $("#goods").append(data);
                        pageNumber++;
                    },
    
                    complete: function (data) {
                        isLoadComplete = true;
                        //alert("complete");
                       
                    },
    
                });
    
            }
    
    
    
        </script>
    </body>
    </html>
    

      

    另外 

    本来是获取可见区域窗口高度
    google最新的浏览器这个开始用$(this).height(); 得到的高度和 $(document).height();一样,IE和低版本的谷歌浏览器是正常的。
    var windowHeight = document.body.clientHeight; //$(this).height();//document.body.clientHeight;
    看来在新版的谷歌浏览器(版本 75.0.3770.100(正式版本) (64 位))里$(this).height(); 得到的高度是整个内容文档的高度。。。。。。很晕。
    窗口尺寸文字参考 https://www.cnblogs.com/wujindong/p/5592908.html

  • 相关阅读:
    php中 global 和$GLOBALS有何不同
    perl 使用LDAP模块
    Sqlite和SQLCE在Windows Mobile 6上的性能对比
    Silverlight学习点滴系列(二)
    C#的新特性:自动属性,对象初始化器,和集合初始化器(转载)
    Silverlight学习点滴系列(一)
    Silverlight学习点滴系列(三)
    URL中传递中文参数 以流形式文件上传下载 演变
    C#经典面试题及答案
    C#笔试题目(综合版样题) (转载)
  • 原文地址:https://www.cnblogs.com/wgscd/p/11171059.html
Copyright © 2020-2023  润新知