标签:
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条数据。
标签:
原文地址:http://www.cnblogs.com/shifan/p/5784628.html