Ajax implements loading cache loding effect-JS Tutorial-php.cn

Ajax implements loading cache loding effect

php中世界最好的语言

Release： 2018-04-03 17:50:56

Original

1727 people have browsed it

This time I will bring you the loding effect of Ajax to realize the loading cache. What are the things to pay attention to when Ajax realizes the loading cache loding effect? The following is a practical case, let's take a look. When making Ajax asynchronous requests, a small dynamic gif image is generally used to create an Ajax Loading in order to increase the 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.

Spin. The online design, demonstration and download address of js is:

http://fgnass.github.io/spin.js/We can dynamically set the style in the link page At the same time, the style configuration script will be automatically generated:

##Spin.js Usage is extremely simple:

Display spinner

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

Copy after login

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: '#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>
<p class="spin"></p>
<p>
<input id="btnRequest" type="button" value="请求数据" />
</p>

Copy after login

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 function is executed.

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!