js 滚动加载

来源http://isux.tencent.com/

查看网页源码,感觉以后可以用,就拷贝下来了做完参考:


<nav id="page-nav" style="display: none; ">
            <a href="?action=page_more&page=1"></a>
        </nav>

    <!-- 瀑布流无限滚动加载的等待提示区 -->
<div id="infscr-loading"><img alt="Loading..." src="http://isux.tencent.com/wp-content/uploads/2013/07/20130704115053640.gif"><span> </span></div>
<script>
/* 滚动加载 */
function page_more(){
    var page=1;
     var loading_flag=false;
    function scrollListen(){
        jQuery(document).scroll(function(){
             var bottom_padding=jQuery(document).height()-jQuery(document).scrollTop()-jQuery(window).height();
            if(bottom_padding<50 && !loading_flag){
                         loading_flag=true;
                        page_show();
                        page++;

            }
        });

    }
        function page_show(){
            var _url="?action=page_more&page="+page
            jQuery.ajax({
                 url: _url,type: 'GET',dataType: 'text', timeout: 20000,error: function(){  },
                    success:function(feedback){
                         loading_flag=false;
                                jQuery('#homecontent').append(feedback);

                        if(feedback.replace(/(^\s*)|(\s*$)/g, "")=="")jQuery("#infscr-loading").hide();
                            }
                    });
        }

        scrollListen();
    }


jQuery(document).ready(function () {
        page_more();
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值