html
<div class="data"><ul></ul></div> <div id="load">点击加载</div>
css
/*Ajax loading*/ #load{ display: block; height: 40px; line-height: 40px; text-align: center; color: #666666; background-color: #f7f7f7; } .loading{ width: 40px; height: 40px; margin: 0 auto; background: url(images/loading.png) center center no-repeat; background-size: auto 60%; -webkit-animation: 2s linear 0s normal none infinite loadrotate; animation: 2s linear 0s normal none infinite loadrotate; } @keyframes loadrotate{ 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100%{transform: rotate(360deg);} } @-webkit-keyframes loadrotate{ 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100%{transform: rotate(360deg);} }
js
$(function(){ var page = 1; var ajax_getting = false; //fn Ajax function ajaxData(){ var dataList = $.ajax({ type: "GET", url: "../data/data" + page + ".json", //request url timeout: 10000, async: true, dataType: "json", success: function(data){ if(data.data.length < 1){ $("#load").html(‘没有更多数据‘).unbind("click");; return false; }else{ for (var i = 0; i < data.data.length; i++) { newHtml($(".data"),data.data[i]) }; $("#load").html(‘点击加载‘); page++; //after load success to plus page number } ajax_getting = false; }, complete: function(XMLHttpRequest,status){ if(status == ‘timeout‘){ aftError("请求超时",dataList); } if(status == ‘error‘){ aftError("异常",dataList); } } }) } //fn click to load data $("#load").click(function(){ $(this).html(‘<div class="loading"></div>‘); setTimeout(function(){ ajaxData() },100) }) //fn scroll to load data $(document).scroll(function(){ var scrollT = $(document).scrollTop(); var windH = $(window).height(); var docuH = $(document).height(); if(scrollT > docuH-windH-1){ if(ajax_getting){ return false; }else{ ajax_getting = true; } $("#load").trigger("click"); } }) //append html code function newHtml(ele,objItem){ var htmlPlus = ‘‘; htmlPlus += ‘<li>‘; htmlPlus += ‘<a href="‘+ objItem.link +‘">‘; htmlPlus += ‘<img src="‘+ objItem.imgurl +‘">‘; htmlPlus += ‘<span class="v_tit">‘+ objItem.title +‘</span>‘; htmlPlus += ‘</a>‘; htmlPlus += ‘</li>‘; ele.find("ul").append(htmlPlus); } //fn after error function aftError(txt,self){ self.abort(); alert(txt); $("#load").html(‘点击加载‘); ajax_getting = false; } //first loading $("#load").trigger("click"); })
json
{ "name": "videoList", "data": [ { "title": "电影标题1", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题2", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题3", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题4", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题5", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题6", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题7", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题8", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题9", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" }, { "title": "电影标题10", "imgurl": "style/images/v1.jpg", "link": "videoDetail.html" } ] }
时间: 2024-10-28 14:52:01