js上拉加载实例

使用jquery插件dropload

首先引入jquery并下载dorpload.js和dropload.css并加载

html代码：

js代码部分

 var counter = 0;
    // 每页展示5个
    var num = 5;
    var pageStart = 0,pageEnd = 0;
	var ii=0;
    // dropload
    $('.recommend').dropload({
        scrollArea : window,
        loadDownFn : function(me){
        	//ajax加载后台数据
            $.ajax({
                type: 'GET',
                url: jpurl,
                dataType: 'json',
                data:{"max":num,"offset":pageEnd},
                success: function(res){
                	if(res.length==0){
                		$('.recommend').empty();
                		$('.recommend').append("
暂无数据
");
                	}else{
                		var result = '';
	                    counter++;
	                    pageEnd = num * counter;
	                    pageStart = pageEnd - num;
	                    //循环输出
	                    for(var i = 0; i < res.data.length; i++){
	                    	ii++;
	                    	var imgstr = res.data[i].image;
							imgstr = imgstr.split(",");
	                        result +=   '
'
							                    +'
'
							                        +''
							                            +''
							                        +''
							                    +'
'
							                    +'
'
							                        +'
'+res.data[i].title+'
'
							                        +'
'
							                           +' 参考价：'
							                            +''+res.data[i].price+''
							                        +'
'
							                    +'
'
							                +'
';
			                //判断数据是否全部加载完成
	                        if(ii >= res.metadata.total){
	                            // 锁定
	                            me.lock();
	                            // 无数据
	                            me.noData();
	                            break;
	                        }
	                    }
	                    // 为了测试，延迟1秒加载
	                    setTimeout(function(){
	                        $('#list').append(result);
	                        // 每次数据加载完，必须重置
	                        $(".productList").click(function(){
								localStorage.xq=$(this).attr("id");
								window.location.href="goodDetails.html";
							})
	                        me.resetload();
	                    },1000);
                	}
                    
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });