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

最新推荐文章于 2024-09-02 15:29:52 发布

老朱-yubing

最新推荐文章于 2024-09-02 15:29:52 发布

阅读量2.4k

点赞数

分类专栏：程序设计文章标签： js 加载中 jquery 动画加载

本文链接：https://blog.csdn.net/robinhunan/article/details/106594785

版权

程序设计专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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

本例子使用了，最常用的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>