html页面加载等待效果

2017-08-08 16:53:41 jazdbmin1639整理 页面等待效果页面等待效果

html页面等待加载

目录：

如何给html页面添加动态等待效果

js如何做等待页面加载效果

Q1：如何给html页面添加动态等待效果

网友看看是否符合需求，修改起来也很方便，都做了注释；

实在不会的，去查看手册即可

$(function() {

$('.btn').click(function() {

layer.msg('加载中（点击关闭）', {

anim: 4, //动画效果

icon: 16,

shade: 0.5, //遮罩层透明度

shadeClose: true, //点击遮罩层关闭

time: 0, //不自动关闭

}, function() {

layer.alert('显示加载信息后，你可以执行别的操作，就像这样', {

skin: 'layui-layer-lan',

closeBtn: 0,

anim: 6 //动画类型

});

})

</script>

html,

body {

margin: 0;

padding: 0;

}

.demo {}

</style>

<body>

Q2： js如何做等待页面加载效果

可以使用第三方的控件Developer-Express来实现；
安装完Developer以后，从工具箱中拖一个ASPxLoadingPanel到页面中，设置必须的一个属性ClientInstanceName后面要用到，然后设置Modal的作用是点击按钮时时候需要抑制后面按钮的使用，也就是弹出来一个灰色的层。
重点是后面的js，在body中添加下面的JS代码
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
loading.Show();
}
function EndRequestHandler(sender, args) {
loading.Hide();
}
</script>
至此，页面中的所有按钮就加上了一个加载等待的效果。