主资源 CDN 域名

    
        <script src="http://zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/dist/dropload.min.js"></script>

        <script src="http://zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/dist/dropload.js"></script>

    

github

//github.com/ximan/dropload

DEMO

兼容FF、chrome、移动端，不兼容IE

//zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/examples/load-bottom.html

//zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/examples/load-top-bottom.html

//zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/examples/multiple-load.html

//zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/examples/product-list.html

//zhcdn01.xoyo.com/xassets/com/pf/slideloadpage/examples/tab.html

使用说明

• 需要加载jquery 1.7.2 或者 zepto
• 注意：最外围的盒子不要使用绝对定位absolute,会导致获取不到高度，一直加载内容
• 注意：可能会出现加载不到内容的情况，是因为页面打开太快，代码未完全运营完整，可以加个定时器

$(function(){
    // 页数
    var page = 0;
    // 每页展示5个
    var size = 5;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'GET',
                url: 'http://ons.me/tools/dropload/json.php?page='+page+'size='+size,
                dataType: 'json',
                success: function(data){
                    var arrLen = data.length;
                    if(arrLen > 0){
                        
                       
                    }else{ // 如果没有数据
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});