不依赖任何插件的下拉加载

HTML：

1 <ul id="loading">
2 　　<li>
3         ...
4    </li>
5 </ul>
6 <div class="pullUpLabel">
7     <span>点击加载</span>
8 </div>   

其中ul#loading为容器。

CSS:

/*下拉加载*/
.pullUpLabel {
    text-align: center; line-height: 60px; font-size: .22rem;
}
.pullUpLabel span {
    padding: 0 25px; background: no-repeat left center;
}
.pullUpLabel span.loading {
    background-image:url(../images/loading.gif);
}

JS:

//下拉加载
    $(function(){
        var totalHeight = 0;
        var wHeight = $(window).height();
        $(window).scroll(function(){
            var sTop = $(window).scrollTop();
            var dHeight = $(document).height();
            totalHeight = parseFloat(sTop) + parseFloat(wHeight);
            if( dHeight == totalHeight) {
                loading();
            }
        });
        $(‘.pullUpLabel‘).click(function(){
            loading();
        });
        function loading(){
            //等待加载
            $(‘.pullUpLabel span‘).addClass(‘loading‘).html(‘加载中...‘);

            for(var i=0; i<3; i++) {
                /*加载3条数据*/
                $(‘#loading‘).append(‘<li>...</li>‘);
            }
            //加载完成
            $(‘.pullUpLabel span‘).removeClass(‘loading‘).html(‘点击加载‘);

        }
    })

每当滚动条滚到最底部或者点击pullUpLabel时，加载3条数据。