Ajax lädt Chrysanthemen-Loding-Effekt

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum Chrysanthemen-Loding-Effekt des Ajax-Ladens vor. Er ist sehr gut und hat einen Referenzwert.

Wenn Ajax asynchron anfragt, ist dies ein dynamischer Artikel Im Allgemeinen werden kleine GIF-Bilder zum Erstellen eines Ajax-Ladevorgangs verwendet, um die Benutzererfahrung zu verbessern.

Hier verwenden wir Spin.js. Es kann einen Ajax-Ladeindikator ohne Bilder oder externe CSS-Stile erstellen Linkseite. Durch dynamisches Festlegen des Stils wird automatisch das Stilkonfigurationsskript generiert:

Die Verwendung von Spin.js ist äußerst einfach:

Display-Spinner

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

Spinner ausblenden

spinner.spin();

Lass uns ein einfaches und vollständiges Beispiel machen, um es zu erleben:

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

Im obigen Beispiel haben wir eine Funktion geschrieben: LoadAjaxSpin. Die Funktion besteht darin, dass das Ladesymbol erscheint, bevor der Ajax-Aufruf beginnt. Nachdem die Daten geladen wurden, verschwindet das Ladesymbol.

Wirkung: Nach dem Klicken. Die Chrysantheme wird angezeigt und dann wird die Rückruffunktion ausgeführt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Konfiguration der globalen Ajax-Ladebox (Ladeeffekt)

Kaskadierende Bedienung des Dropdown-Menüs

Einfache Anwendung basierend auf Ajax-Formularübermittlung und Hintergrundverarbeitung

Das obige ist der detaillierte Inhalt vonAjax lädt Chrysanthemen-Loding-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!