layui加载数据显示loading加载完成loading消失的实例代码

1. 基本思路

Layui提供了一个全局加载的效果，需要使用layer模块来实现。具体思路是：在数据加载之前显示loading图标，在数据加载完成之后隐藏loading图标。

2. 实现代码

下面是一个使用layui加载数据显示loading，完成后消失loading的实例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui Loading Demo</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

  <!-- 模拟数据加载 -->
  <button id="load-data" class="layui-btn">加载数据</button>

  <script src="layui/layui.js"></script>
  <script>
    layui.use(['layer'], function(){
      var layer = layui.layer;

      // 点击加载按钮，显示loading图标
      $("#load-data").click(function() {
        var index = layer.load(1);

        // 模拟数据加载
        setTimeout(function() {
          // 加载完成，隐藏loading图标
          layer.close(index);

          // 显示数据
          layer.msg('数据加载成功！');
        }, 3000);
      });

    });
  </script>
</body>
</html>

在上面的代码中，我们首先引入了layui的css和JS文件，然后在页面中添加了一个按钮，用于模拟数据加载的功能。在layui.use方法中初始化了layer模块，并给“加载数据”按钮添加了一个click事件。在事件回调函数中，使用layer.load方法显示loading图标，然后模拟加载数据的过程，3秒钟后使用layer.close方法隐藏loading图标，并使用layer.msg方法弹出数据加载成功的信息。