Ajax 로딩 국화 로딩 효과

이 기사에서는 Ajax 로딩의 국화 로딩 효과에 대한 관련 정보를 주로 소개합니다. 매우 좋고 참고할 가치가 있습니다. 필요한 친구가 참고할 수 있습니다.

Ajax가 비동기적으로 요청할 때 일반적으로 작은 동적 gif 사진을 사용합니다. 사용자 경험을 향상시키기 위해 Ajax Loading을 만드십시오.

여기서는 Spin.js를 사용합니다. js 스크립트는 그림이나 외부 CSS 스타일 없이 Ajax 로딩 표시기를 생성할 수 있습니다.

링크 페이지에서 스타일을 동적으로 설정할 수 있으며 자동으로 구성 스크립트가 수행됩니다. 스타일을 생성하려면:

Spin.js 사용법은 매우 간단합니다.

Show spinner

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

Hide 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: &#39;#000&#39;, // 花瓣颜色
 opacity: 0.25,
rotate: 0, // 花瓣旋转角度
 direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
 speed: 1, // 花瓣旋转速度
 trail: 60, // 花瓣旋转时的拖影(百分比)
 zIndex: 2e9, // spinner的z轴 (默认是2000000000)
 className: &#39;spinner&#39;, // spinner css 样式名称
 top: &#39;50%&#39;, // spinner 相对父容器Top定位 单位 px
 left: &#39;50%&#39;, // spinner 相对父容器Left定位 单位 px
 shadow: false, // 花瓣是否显示阴影
 hwaccel: false, //spinner 是否启用硬件加速及高速旋转 
 position: &#39;absolute&#39;
};
var spinner = new Spinner(opts);
$(ele).show();
var target = $(ele)[0];
spinner.spin(target);
$.ajax({
url: get_url,
dataType: &#39;html&#39;,
success: function(data) {
spinner.spin();
$(ele).hide();
callback(data);
}
})
}
var foo = function(data) {
console.log(data);
}
$(function() {
$(&#39;#btnRequest&#39;).on(&#39;click&#39;, function() {
loadAjaxSpin(&#39;.spin&#39;, &#39;http://192.168.1.191/h5/font.html&#39;, foo);
});
});
</script>
<p class="spin"></p>
<p>
<input id="btnRequest" type="button" value="请求数据" />
</p>

위 예제에서는 loadAjaxSpin 함수를 작성했습니다. 이 함수는 ajax 호출이 시작되기 전에 로딩 아이콘이 나타나는 것입니다.

효과: 클릭하면 chrysanthemum이 표시된 후 콜백 함수가 실행됩니다.

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Ajax 전역 로딩 상자 구성(로딩 효과)

드롭다운 메뉴의 계단식 작업

Ajax 양식 제출 및 백그라운드 처리를 기반으로 한 간단한 애플리케이션

위 내용은 Ajax 로딩 국화 로딩 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!