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结束后的操作进行特别的处理。