layer.load()

一、使用場景

layer.load()是layui中的一個彈出loading層的方法。

在需要向用戶展示等待狀態的時候，比如頁面載入/提交時等，就可以使用layer.load()來彈出loading層，讓用戶知道系統正在處理，以免用戶焦慮或者誤解。

使用layer.load()彈出loading層後，同時頁面上的其他元素都會被遮蓋，用戶無法進行其他操作，這使得layer.load()是一種很好的處理等待/禁止操作的方法。

二、使用方法

使用layer.load()只需要簡單的調用它，不加任何參數即可：

layer.load();

這樣就可以彈出一個默認樣式的loading層。使用默認的方式可能不能滿足各種不同場景的需要，所以要根據具體情況來使用附加參數。

三、示例代碼

下面是一些使用layer.load()的示例代碼：

1. 基本使用

最簡單的使用方式：

layer.load();

運行結果是彈出一個默認樣式的loading層，內容為：Loading…

2. 載入自定義內容

通過傳入HTML代碼作為參數，我們可以載入自定義內容。下面是一個例子，HTML代碼中包括了一個.gif圖片和一個文字提示：

layer.load({
  content: ' 載入中...'
});

在實際應用中，我們常常需要向用戶展示某種Loading狀態。通過傳入自定義的HTML組成，可以輕鬆的實現該功能。

3. 載入黑色半透明背景

默認情況下，loading層不會覆蓋整個頁面，點擊背景的滾動條依然可以被滾動。如果需要把整個頁面覆蓋，一般會在loading層下面添加半透明的黑色背景。

layer.load({
  shade: [0.8,'#000']
});

其中shade是傳入透明度以及顏色的數組，第一個參數0.8表示透明度，範圍為0~1，第二個參數表示顏色，本例中是黑色。

4. 關閉後的處理

某些場合下，loading結束後需要執行一些操作，比如重新計算頁面大小/位置。這種情況下，需要在layer.load()後面連續調用幾個函數：

layer.load();
//一些需要等待的操作...
//等待完成後
layer.closeAll('loading');

在執行後面的操作之前，彈出loading層以展示等待狀態。當需要的操作完成後，通過layer.closeAll(‘loading’)來關閉loading層。

四、總結

layer.load()方法是layui中一個非常方便的彈出loading層的方法，可以用於等待/禁止用戶操作。除了默認樣式之外，還可以根據不同的場景使用附加參數來自定義loading內容和樣式。

在實際應用中，要根據需要合理使用該方法，並且在必要時要對loading結束後的操作進行特別的處理。