Ajax chargeant l'effet de loding du chrysanthème

Cet article présente principalement les informations pertinentes sur l'effet de chargement du chrysanthème du chargement Ajax. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Lorsqu'Ajax demande de manière asynchrone, une demande dynamique est. généralement utilisé. Petites images Gif pour créer un chargement Ajax afin d'augmenter l'expérience utilisateur.

Ici, nous utilisons Spin.js. Le script js est compressé à 5k. Il peut créer un indicateur de chargement Ajax sans aucune image ni style CSS externe.

Nous pouvons créer un indicateur de chargement Ajax sur. la page de liens. , la définition dynamique du style générera automatiquement le script de configuration du style :

L'utilisation de Spin.js est extrêmement simple :

Affichage spinner

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

Masquer spinner

spinner.spin();

Faisons un exemple simple et complet pour en faire l'expérience :

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

Dans l'exemple ci-dessus, nous avons écrit une fonction loadAjaxSpin. La fonction est que l'icône de chargement apparaît avant le démarrage de l'appel ajax. Une fois les données chargées, l'icône de chargement disparaît

Effet : un chrysanthème s'affiche après avoir cliqué sur , puis exécutez la fonction de rappel.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Configuration de la boîte de chargement globale Ajax (Effet de chargement)

Fonctionnement en cascade du menu déroulant

Application simple basée sur la soumission d'un formulaire Ajax et le traitement en arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!