layer.load()

发布时间:2023-05-21

一、使用场景

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: ' <img src="loading.gif" /> 加载中...'
});

在实际应用中,我们常常需要向用户展示某种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结束后的操作进行特别的处理。