loading加載和layer.js
阿新 • • 發佈：2018-04-22
blog cli 刷新 mark 回調函數 num load() 根據 span
var index = layer.load(); //不傳入參數，默認傳0
方法二：
var index = layer.load(1); //參數1，另外一種風格
方法三：
var index = layer.load(2,{time:10*1000}); //參數2，換一種風格；time設置最長等待時間
layer.js中的loading加載
l本篇主要介紹layerjs中的loading加載在實際項目中的應用
1、使用的技術
前端：HTML5+CSS3+JS+layer.js
後端：.net
2、遇到的問題
在使用layer.js插件中提供的loading時，需要在layer.js中的layer.css找到對應的gif格式動態圖，此gif圖需要和插件中的loading加載gif圖大小尺寸相同
3、layer.js中load()方法介紹
load不需要傳太多的參數，根據自己喜歡的風格來設置。方法中提供三種風格，供其選擇。且Load中的icon支持傳入0-2，如果是0，無需傳入。但是load默認是不會關閉的，需要在回調函數中關閉。
var index = layer.load(); //不傳入參數，默認傳0
方法二：
var index = layer.load(1); //參數1，另外一種風格
方法三：
var index = layer.load(2,{time:10*1000}); //參數2，換一種風格；time設置最長等待時間
4、實際項目中的運用
在對應的需要加載loading的html頁面的js中加入寫入loading加載的代碼，以首頁登錄頁面為例：
1）設置登錄界面的點擊事件：
$(‘#submit‘).click(function() {
$(this).css(‘background‘,‘green‘);//設置當前點擊登錄按鈕後，改變其登錄框的顏色
confirm(); //調用ajax函數
}) 2）loading加載：
$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () { //插件加載前
this.layerIndex = layer.load(0, { shade: [0.01, ‘#fff‘] });
$(‘#submit‘).val("正在登錄")
},
complete: function () { //完成加載後執行
layer.close(this.layerIndex); //完成加載後關閉loading
},
error: function () { //報錯時執行
layer.alert(‘顯示異常，請刷新後重試‘, {
skin: ‘layui-layer-molv‘
, closeBtn: 0
, shift: 4 //動畫類型
});
}
});
}); 5、效果圖
loading加載和layer.js