表单提交loading加载提示效果

 

提交表单后，有时候会需要一定的响应时间，比如说，若需要往很多表里面插入数据，可能会出现点击提交后，服务器响应还未返回，在一定时间内浏览器毫无反应，会给用户造成错觉，以为系统是不是崩了，这就很尴尬啦。

因此，可以自定义在提交表单后添加一个loading效果。

来来来，先附一张动图：

CSS：

.submit_loading {
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:#000;
    text-align:center;
    opacity:0.3;
}
.loading_show {
    margin-top:15%;
}
.loading_context {
    color:#fff;
}

其中opacity属性用来设置 div 元素的不透明级别，可根据具体要求调整标签透明度。

HTML：

<div id="loading" class="submit_loading" style="display:none">
    <div class="loading_show">
        <img src="../loading.gif">
        <p class="loading_context">正在提交，请稍候。。。</p>
    </div>
</div>

以下JS用的是KISSY

在表单提交事件将加载效果显示：

//提交表单事件
Event.on("#save",'click',function(e){
    //此处省略n行代码
    DOM.show("#loading");
    //此处省略n行代码
});

当然了，如果提交时后端抛出异常，提交失败（或者提交成功后不刷新页面），需要在提交表单请求的回调函数中将加载效果隐藏，以便在页面能够进一步操作：

DOM.hide("#loading");

如有错误之处，欢迎指出，万分感谢！