zoukankan      html  css  js  c++  java
  • JQ下拉加载更多

    <!DOCTYPE=html>  
    <html>  
    <head>  
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>  
    </head>  
    <body>  
        <div>下拉加载更多</div>  
        <div class="main" style="height:700px;overflow:auto;">  
            <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>  
        </div>  
    </body>  
    <script  type="text/javascript">  
    $(document).ready(function(){  
        $(".main").unbind("scroll").bind("scroll", function(e){  
            var sum = this.scrollHeight;  
            if (sum <= $(this).scrollTop() + $(this).height()) {  
                $(".main").append($(".child").clone());  
            }  
        });  
    });  
    </script>  
    </html>

      如果等滚动条拉到底部时再加载,会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源,这时需要时间。一个更佳的方式是,当滚动条距离底部一定距离(C)时,就动态加载更多,向服务端请求资源。也就是预加载,预读取。公式如下。

    this.scrollHeight - C <= $(this).scrollTop() + $(this).height()  
  • 相关阅读:
    学习资料
    InstallShield常用工具
    InstallShield中调用API
    系统目录
    abort和exit
    Uninstall Registry Key
    GDI+资料
    VBScript是什么?有什么优缺点?
    DrawImage调查
    KEIL MDK环境下uCOSII在LPC17xx上的移植实例 Chung
  • 原文地址:https://www.cnblogs.com/zhangzhijian/p/6861262.html
Copyright © 2011-2022 走看看