1.场景

项目开发过程中，可能会遇到，后台响应很慢的情况，这是，前端就需要给出友好的提示，以便让用户有更好的体验。

拿我个人项目中的一个事例说一下，删除站点的时候，需要删除站点的数据明细，数据明细有100w左右，删除100w数据，响应的时长肯定很长，不可能让用户，傻傻的一直等把，以我的经验来说，我发现点击提交后，很久没有响应，我就觉得网站有问题，就会按F5刷新。

2.代码

//加载中样式...
var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});
layer.close(loading);

time为0，不会主动关闭，如果为5，5秒后就会关闭。

3.事例

function delComm(index){var url = "deleteStationInfoById"var data = {"id" : $("#id").val(),"type" : $("[name='del']:checked").val(),"pwd" : $("#pwd").val(),}//加载中样式... var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});$.ajax({url:url,dataType : "json",data : data,success : function(data) {layer.close(loading);if(data.code == 0){layer.msg(data.error)layer.close(index);}else{   //成功layer.closeAll();layer.msg(data.error, {icon: 1});setTimeout(function(){$(window.parent.document).find("#form").submit();},500);}}});
}

结合事例代码分析，在点击删除按钮后，会触发ajax请求，在ajax前

//加载中样式...
var loading = layer.msg('正在删除', {icon: 16, shade: 0.3, time:0});

ajax后:

layer.close(loading);

这样就很好的模拟了，后台响应慢的过程中，前端无法操作的效果。效果图如下：

如果你热衷技术，喜欢交流，欢迎加入我们！

欢迎关注公众号，免费领取各种学习视频，学习相关java各个技术点面试知识，有相关学习疑问或者面试困惑,也可以通过公众号私信博主

layui正在加载遮罩层相关推荐

如何封装axios请求。统一基地址、加载遮罩层、响应参数优化
gitee地址:https://gitee.com/mengxianchen/axios-request-tool 线上体验地址: http://121.43.41.227:82/ 浏览器网络设 ...
layer ajax 用法,layer加载遮罩层使用 Ajax Loading Demo
最近在写ajax请求后台来过程中layer等待层的功能时遇到layer的加载框总是在请求完后才出现的问题. 后来找到原因是因为ajax请求设置为同步的,由于js是单线程的导致程序先执行了后台请求然后请 ...
layui信息加载流的方式加载数据
SSM项目中使用layui信息加载流的方式加载数据这里首先jsp页面来一个div容器,这里数数据显示的地方 //css样式: <style type="text/css"& ...
layui loading加载
项目场景 layui loading加载: @Overridevar loading = layer.msg('信息获取中', {icon: 16, shade: 0.3, time:0}); //定 ...
extjs ajax 遮罩层,[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防 ...
layui ajax流加载,layui中流加载layui.flow
1.引入layui.css和layui.js 2. html中定义容器 js部分: layui.use('flow', function(){ var $ = layui.jquery; //不用额外 ...
layui tree 加载慢_图片太多，加载慢，我用了layui里的方式，放在服务器后还是太慢！怎么解决？？？有没有什么优化的技巧？？？...
怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决??????? layui.use(['layer','flow ...
layui流加载及传参
<ul class="shop-list ml10 mr10 store_list" id='demo' style="margin-top:80px;" ...
[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防 ...

layui正在加载遮罩层

1.场景

2.代码

3.事例

layui正在加载遮罩层相关推荐

最新文章

热门文章