layer loading...提示(转)

最新推荐文章于 2025-05-29 14:21:11 发布

yournevermore

最新推荐文章于 2025-05-29 14:21:11 发布

阅读量8.6k

点赞数 2

分类专栏：前端

前端专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何在网页中引入Layer UI库，并在AJAX请求过程中使用它来显示加载提示，提升用户体验。通过设置自定义的图标、遮罩和超时时间，确保即使在数据加载耗时较长的情况下，也能保持良好的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面引用
<link rel="stylesheet" href="../Js/layer/skin/layer.css"  />
<script type="text/javascript" src="../Js/layer/layer.js"></script>

2、ajax请求中应用
<script type="text/javascript">
var loadingFlag;
$.ajax({
    url: "../FlightHandler/JDFlightHandler.ashx",
    type: "post",
    data: info,
    dataType: "text",
    beforeSend: function (XMLHttpRequest) {
        //注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
        loadingFlag= layer.msg('正在读取数据，请稍候……', { icon: 16, shade: 0.01,shadeClose:false,time:60000 });
    },
    success: function (data) {
    
            layer.close(loadingFlag);
    },
    complete: function (XMLHttpRequest, textStatus) {

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {

    }
});
</script>