zoukankan      html  css  js  c++  java
  • 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>



  • 相关阅读:
    ECharts之柱状图 饼状图 折线图
    Vue自定义指令(directive)
    HDU 1231 最大连续子序列
    POJ 2533 Longest Ordered Subsequence
    HDU 1163 Eddy's digital Roots
    HDU 2317 Nasty Hacks
    HDU 2571 命运
    HDU 4224 Enumeration?
    HDU 1257 最少拦截系统
    HDU 2740 Root of the Problem
  • 原文地址:https://www.cnblogs.com/yaojaa/p/2278853.html
Copyright © 2011-2022 走看看