Ajax 국화 로 딩 효과 탑재

Ajax 비동기 요청 시 사용자 체험 을 늘 리 기 위해 동적 gif 작은 그림 을 이용 하여 Ajax Loading 을 만 듭 니 다.
여 기 는 Spin.js 를 사용 합 니 다.이 js 스 크 립 트 를 압축 한 후 5k 입 니 다.그림,외부 CSS 스타일 을 사용 하지 않 아 도 Ajax Loading 표시 기 를 만 들 수 있 습 니 다.
Spin.js 의 온라인 디자인,프레젠테이션 및 다운로드 주 소 는:http://fgnass.github.io/spin.js/
링크 페이지 에서 동적 설정 스타일 과 함께 스타일 설정 스 크 립 트 를 자동 으로 생 성 할 수 있 습 니 다.

Spin.js 의 용법 은 매우 간단 하 다.
스 피 너 보이 기

var target=document.getElementById("id")
 spinner.spin(target);

숨겨 진 spinner
 spinner.spin();
우리 간단 하고 완전한 예 를 들 어 한 번 체험 해 봅 시다. 

<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
//      loading       ，    ajax     ，        。
function loadAjaxSpin(ele, get_url, callback) {
var opts = {
lines: 13, //     
 length: 20, //     
 width: 10, //     
 radius: 30, //        
 scale: 1,
corners: 1, //       (0-1)
 color: '#000', //     
 opacity: 0.25,
rotate: 0, //       
 direction: 1, //        1:    , -1:    
 speed: 1, //       
 trail: 60, //         (   )
 zIndex: 2e9, // spinner z  (   2000000000)
 className: 'spinner', // spinner css     
 top: '50%', // spinner      Top      px
 left: '50%', // spinner      Left      px
 shadow: false, //         
 hwaccel: false, //spinner               
 position: 'absolute'
};
var spinner = new Spinner(opts);
$(ele).show();
var target = $(ele)[0];
spinner.spin(target);
$.ajax({
url: get_url,
dataType: 'html',
success: function(data) {
spinner.spin();
$(ele).hide();
callback(data);
}
})
}
var foo = function(data) {
console.log(data);
}
$(function() {
$('#btnRequest').on('click', function() {
loadAjaxSpin('.spin', 'http://192.168.1.191/h5/font.html', foo);
});
});
</script>
<div class="spin"></div>
<div>
<input id="btnRequest" type="button" value="    " />
</div>

위의 예 에서 우 리 는 함수 loadAjaxspin 을 썼 습 니 다.ajax 호출 시작 전에 loading 아이콘 이 나타 나 고 데이터 로드 가 완료 되면 loading 아이콘 이 사라 집 니 다.
효과:클릭 후 국 화 를 표시 하고 리 셋 함 수 를 실행 합 니 다.