loading加載和layer.js

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、效果圖