Ajax loading chrysanthemum loding effect

This article mainly introduces the relevant information on the chrysanthemum loding effect of Ajax loading. It is very good and has reference value. Friends in need can refer to it

When Ajax asynchronously requests, a dynamic one is generally used. Gif small pictures to create an Ajax Loading to increase user experience.

Here we use Spin.js. The js script is compressed to 5k and can create an Ajax Loading indicator without any pictures or external CSS styles.

We can create an Ajax Loading indicator on the link page , dynamically setting the style will automatically generate the style configuration script:

Spin.js Usage is extremely simple:

Display spinner

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

Hide spinner

spinner.spin();

Let’s do a simple and complete example to experience it:

<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>

In the above example, we wrote a function loadAjaxSpin. The function is that the loading icon appears before the ajax call starts. After the data is loaded, the loading icon disappears.

Effect: After clicking, the chrysanthemum is displayed, and then the callback is executed. function.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Configuration of Ajax global loading box (Loading effect)

Cascade operation of drop-down menu

Simple application based on Ajax form submission and background processing

The above is the detailed content of Ajax loading chrysanthemum loding effect. For more information, please follow other related articles on the PHP Chinese website!