提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

如何使用jquery在页面动画显示 加载中效果

jQuery动画 如何 显示 页面 加载 效果 使用
2023-09-11 14:21:18 时间

       互联网应用开发中，最常用的可能就是显示加载中，特别是一些慢的应用，显示加载中，让用户感觉数据正在加载，有利于降低用户焦虑，提升用户体验，增加用户容忍度和耐心。

       本例子使用了，最常用的jquery前端开发库。

        实际应用使用 $('#loading').show() 或者 $('#loading').hide()显示隐藏进度条加载即可。

 

<html>
<head>
<meta charset="utf-8">
</head>
<script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<body>
<a href="javascript:test();">显示加载中3秒后消失</a>

<script type="text/javascript">
jQuery(function(){
	 $('body').append('<div id="loading" style="display:none;position:fixed;z-index:20202001;top:0;left:0;height:100%;width:100%;background: rgba(0,0,0,0.2) url(\'//cdn.bootcss.com/layer/3.1.0/theme/default/loading-2.gif\') no-repeat fixed center;"></div>');

});


//测试显示加载中...
function test(){
	$('#loading').show();//显示加载中
	setTimeout(function(){$('#loading').hide();},3000);//3秒后关闭
}
</script>
</body>
</html>

 

相关文章