6-给layui.open加loading简单示例

前提条件：由于layui.open中展示的内容从后台获取，但获取较慢，体验不好，故需要加一个loading，等待获取到数据后才能操作内容

一般情况下，可以直接使用layui中的load()方法，但是该方法的展示范围为整页面，如果展示的内容是居中展示，则不影响，不过需要自行给layui.open的内容区域加遮罩层。

var load = layer.load()

过程：首先做一个loading，这里简单使用，直接用layui中的loading图标

<i class="layui-icon layui-icon-loading"></i>

用上后发现，loading不动了，查了资料后发现用法有问题，对于动态图标，需要使用layui封装的动画样式，如 layui-anim layui-anim-rotate layui-anim-loop。

<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>

加上样式后就能转了

然后制作遮罩层

用一个div包裹loading，给div及loading加样式如下即可

/*遮罩层*/
.loading{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: #e5e5e5;
    opacity: 0.3;
}
/*图标*/
.loadIcon{
    font-size: 35px;
    color: #000;
    position: relative;
    left: 45%;
    top: 45%;
}

<div class="loading">
   <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop loadIcon"></i>
</div>

如果只有一个layui.open用到的情况，可以直接在展示内容中加loading，在open的成功回调success中展示loading

$('.loading').css('display','block')

等到数据获取后，在请求的回调中隐藏loading即可

$('.loading').css('display','none')

如果有多个layui.open用到的情况，可以先定义一个变量记录loading的html文本，然后再open的成功回调中插入loading

success会携带两个参数，分别是当前层DOM、当前层索引

var loadingHtml = '<div class="loading">'+
    '<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop loadIcon"></i>'+
    '</div>'

layer.open({
   type: 1,
   title: '提示',
   area: ['40%', '80%'], //宽高
   content: $("#openHTml"),
   success: function (layero) {
      layero.find('.layui-layer-content #openHTml').append(loadingHtml)
   }
})

等到数据获取后，在请求的回调中移除loading即可

$('.loading').remove()

坚持就是胜利！