滚动加载

转动css3动画样式：

![](2016-04-20 18.14.29.png)@-webkit-keyframes loading{ 
0%{-webkit-transform:rotate(0deg);} 
100%{-webkit-transform:rotate(360deg);
}}
@-moz-keyframes loading{    
0%{-moz-transform:rotate(0deg);}    
100%{-moz-transform:rotate(360deg);
}}
@-o-keyframes loading{ 
0%{-o-transform:rotate(0deg);}  
100%{-o-transform:rotate(360deg);
}}
@keyframes loading{  
0%{transform:rotate(0deg);} 
100%{transform:rotate(360deg);
}}
.text{
  text-align:center;
  .W_loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("http://img.t.sinajs.cn/t6/style/images/common/loading.png?id=1404211047727");
    background-image: url("http://img.t.sinajs.cn/t6/style/images/common/loading.gif?v=792900d8c3826a44") \9;
    background-repeat: no-repeat;
    vertical-align: middle;
    -webkit-animation: loading .8s linear infinite;
    -moz-animation: loading .8s linear infinite;
    -o-animation: loading .8s linear infinite;
    animation: loading .8s linear infinite;
  }
}

jquery操作：

$(function() {    
var loading='<p class="text">'+
        '<i class="W_loading"></i>正在加载中，请稍候...'+
    '</p>';
$('#topic2').append(loading);    

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();//获取滚动条的
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();

　　if(scrollTop + windowHeight  == scrollHeight){
         if(scrollS!=0&&(scrollTT+1)==scrollS){         //scrollS!=0判断是否加载完毕 & (scrollTT+1)==scrollS判断是否得到的数据是否渲染完毕
            $('#topic2').append(loading);
            getTopic(10*scrollS,id);   
        }
    }    
});

//获取话题列表
function getTopic(start,channelId){
    scrollTT=scrollS;
    $.getJSON("/api/v4/new_get_topics",{
        start: start,
        count: 10,
        channel_id:channelId
        },function(data){ 
        if(data.length>0){ 
            var aaa='';
            for(var i=0;i<data.length;i++){
                var avatarPic='http://static.imxingzhe.com/default-avatar/default-avatar.png';
                aaa+='<div class="topic-list topic-tops top">'+
                            '<a class="topic-title" href="/topic/'+data[i].id+'/" target="_blank">'+
                                '<div class="topic-list-center">'+
                                        '<img class="topic-avatar" width="28" height="28" src="'+userPicUrl+'!avatar" alt="'+data[i].user.username+'的头像"  onerror="this.src='+avatarPic+';this.onerror=null">'+data[i].user.username+
                                '</div>'+
                            '</a>'+
                        '</div>';
            }
            $('#topic2').append(aaa);
            $('.text').empty(); 
            scrollS++;
        }else{ 
            $('.text').empty(); 
            scrollS=0;
            $('#topic2').append('<p class="text" style="font-size: 20px;padding: 50px;">全部加载完毕^_^</p>');
        } 
    }); 
}
getTopic(0,0);
});

总结

如何禁止和启用滚动事件:

$(window).scroll(function(){ $ (this).scrollTop (0) });

$(window).unbind("scroll");