layui几种加载方式

xcLeigh

已于 2022-08-12 10:27:26 修改

阅读量4.5k

点赞数 5

分类专栏： Layui框架文章标签： layui javascript 前端

于 2022-08-12 10:26:05 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/126298426

版权

Layui框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1.加载引用说明
2.加载方式1，加载框按照自定义时间消失
3.加载方式2-加载框执行完，一秒后消失
4.官方解释
5.好的html源码下载

1.加载引用说明

1.1、模块化加载（按需）
引入两个文件：
./layui/css/layui.css
./layui/layui.js
则必须使用layui.use来加载需要的模块。

1.2、非模块化加载（一次性）
引入两个文件：
./layui/css/layui.css
./layui/layui.all.js
不用layui.use来加载。

2.加载方式1，加载框按照自定义时间消失

自定义时间，让加载框消失

icon：图标
shade：透明度，值：【0-1】
time：消失时间，毫秒

layer.msg('Loading...', {
  icon: 16   
  , shade: 1
  , time: 5000
});

加载框效果图
在这里插入图片描述

3.加载方式2-加载框执行完，一秒后消失

layer.close(loading); //按照loading变量关闭加载框，所有一般申明loading时候要全局的
layer.closeAll(‘loading’); //关闭所有的加载框
Loading… 这里可以写加载的提示

//放到页面加载时候
var loading = layer.load('Loading...', {
  shade: [0.3,'red'] //0.1透明度  red红色背景
});

//以下内容放到所有执行完后
setTimeout(function (data) {
  //最后数据加载完 让 loading层消失
  //layer.close(loading);
  layer.closeAll('loading');
}, 500);

在这里插入图片描述