• Jquery的 scroll事件,实现当滚动条到达最底部时,自动加载新项


    主题:使用 Jquery的 scroll事件,实现当滚动条到达最底部时,自动加载新项

    原理:滚动条事件中,判断是否到达最底部,是的话调用添加方法,异步向尾部追加内容。

    补充1:网上有找到一个此效果的网站:www.diandian.com

           2:替代方案:QQ空间的好友动态中使用在最底部放置一个按钮,之后异步加载数据!

    前置条件:添加jquery.min.js

    源码:

    (以下代码,关于判断是否为最底部的方式,其精确性有待进一步研究)

    ------------------------------------------------------------------------------------

    <html>

    <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    function insertcode() {
    var $body = $("body");
    $body.append(
    '<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
    $(
    "#page_tag_load").hide();
    }
    $(document).ready(
    function () {

    $(window).scroll(
    function () {
    var $body = $("body");
    var $html = "";
    $html
    += "<br/>" + ($(window).height() + $(window).scrollTop());
    $html
    += "<br/>window.height: " + $(window).height();
    $html
    += "<br/>body.height: " + $body.height();
    $html
    += "<br/>window.scrollTop: " + $(window).scrollTop();
    $(
    "#page_tag_bottom").html($html);

    /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
    if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
    $(
    "#page_tag_load").show();
    //setTimeout(insertcode, 1000);/*IE 不支持*/
    insertcode();
    }
    });
    });
    </script>
    </head>

    <body>
    <div style=" height:1000px; font-size:24px;">新增项目</div>
    <div id="page_tag_bottom" style=" 100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
    </body>

    </html>



  • 相关阅读:
    (兼容)IE9 以下版本浏览器兼容HTML5的方法
    使用ORACLE 中ROWNUM方法实现数据库分批获取
    更新上传到github的代码
    Spring-AOP
    C++结构体的应用_YCOJ
    基本类型数据封装
    sessionStorage 封装
    Vue国际化四 -- 本地缓存
    Vue国际化三【在下拉框中使用】
    Vue国际化二 【在表格中的使用】
  • 原文地址:https://www.cnblogs.com/yaojaa/p/2278853.html
Copyright © 2020-2023  润新知