<style> .preloader { display: none; width: 20px; height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: preloader-spin 1s step-end infinite; animation: preloader-spin 1s step-end infinite; } .preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%236c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; } .preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>"); } @-webkit-keyframes preloader-spin { 0% { -webkit-transform: rotate(0deg); } 8.33333333% { -webkit-transform: rotate(30deg); } 16.66666667% { -webkit-transform: rotate(60deg); } 25% { -webkit-transform: rotate(90deg); } 33.33333333% { -webkit-transform: rotate(120deg); } 41.66666667% { -webkit-transform: rotate(150deg); } 50% { -webkit-transform: rotate(180deg); } 58.33333333% { -webkit-transform: rotate(210deg); } 66.66666667% { -webkit-transform: rotate(240deg); } 75% { -webkit-transform: rotate(270deg); } 83.33333333% { -webkit-transform: rotate(300deg); } 91.66666667% { -webkit-transform: rotate(330deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes preloader-spin { 0% { transform: rotate(0deg); } 8.33333333% { transform: rotate(30deg); } 16.66666667% { transform: rotate(60deg); } 25% { transform: rotate(90deg); } 33.33333333% { transform: rotate(120deg); } 41.66666667% { transform: rotate(150deg); } 50% { transform: rotate(180deg); } 58.33333333% { transform: rotate(210deg); } 66.66666667% { transform: rotate(240deg); } 75% { transform: rotate(270deg); } 83.33333333% { transform: rotate(300deg); } 91.66666667% { transform: rotate(330deg); } 100% { transform: rotate(360deg); } } </style> $(function(){ |
| (function(){ |
| //所有要加载的接口用数组存起来 |
| var arrUrl=[ |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=1', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=2', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=3', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=4', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=1', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=1', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=2', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=3', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=4', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=5', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=1', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=2', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=3', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=4', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=5', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=1', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=2', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=3', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=4', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=5', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=4', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=5', |
| 'http://www.wookmark.com/api/json/popular?callback=?&page=1' |
| |
| |
| ]; |
| //var arrUrl2=[]; |
| |
| //截取参数 |
| //for(var i=0,j=arrUrl.length;i<j;i++){ |
| // var ss=arrUrl[i].split('=')[2]; |
| // arrUrl2.push(ss); |
| //} |
| // |
| var oImgload=$('.preloader'); |
| var oloadtext=$('#loadtext'); |
| oImgload.css({ |
| "display":"block" |
| }); |
| |
| var arr3=[]; |
| var num=0; |
| //for(var i=0;i<arrUrl.length;i++){ |
| //$.getJSON(arrUrl[i], function(Data) { |
| //alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| //oloadtext.html(parseInt(b/arrUrl.length*100)+"%"); |
| |
| // }); |
| |
| //} |
| |
| ajax1=$.getJSON(arrUrl[1], function(Data) { |
| num++; |
| |
| //alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.empty().html(parseInt(num/5*100)+"%"); |
| |
| }); |
| |
| ajax2=$.getJSON(arrUrl[2], function(Data) { |
| num++ |
| // alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.html(parseInt(num/7*100)+"%"); |
| |
| }); |
| ajax3=$.getJSON(arrUrl[2], function(Data) { |
| num++ |
| // alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.html(parseInt(num/7*100)+"%"); |
| |
| }); |
| ajax4=$.getJSON(arrUrl[2], function(Data) { |
| num++ |
| // alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.html(parseInt(num/7*100)+"%"); |
| |
| }); |
| |
| |
| ajax5=$.getJSON(arrUrl[2], function(Data) { |
| num++ |
| // alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.html(parseInt(num/7*100)+"%"); |
| |
| }); |
| ajax6=$.getJSON(arrUrl[2], function(Data) { |
| num++ |
| // alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.html(parseInt(num/7*100)+"%"); |
| |
| }); |
| ajax7=$.getJSON(arrUrl[2], function(Data) { |
| num++ |
| // alert(Data) |
| //alert(parseInt(num/arrUrl.length*100)+"%") |
| oloadtext.html(parseInt(num/7*100)+"%"); |
| |
| }); |
| |
| |
| // alert(ajax1)\ |
| $.when(ajax1, ajax2, ajax3 ,ajax4, ajax5 ,ajax6,ajax7).done(function(){ |
| |
| oImgload.css({ |
| "display":"none" |
| }); |
| |
| // alert("请求成功") |
| |
| }).fail(function(){ |
| |
| alert("网络不好,请刷新一下"); |
| location.reload() ; |
| |
| }); |
| |
| |
| |
| |
| })() |
| |
| |
| |