先上图: 以下是几个必须的文件: 1.loading.css: #loading {position: fixed;top: 0;left: 0;width: 100%;height: 100%;b
先上图:
以下是几个必须的文件:
1.loading.css:
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 15000;}#loading img { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -15px; margin-left: -15px;}
2.index.html:
<div id="loading"> <img src="images/loading.gif"></div>
3.再来一张动态的GIF图片,OVER!就是这么easy!
打开页面出现画面,如果想关闭,使用
$('#loading').hide();
打开使用:
$('#loading').show();
实例:
//点击查询按钮重新显示loadingfunction search() { $('#loading').show(); $.ajax({ url : "xxx", type : 'POST', success : function(data) { //成功后 隐藏loading框, $('#loading').hide(); //to do something },}