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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。