[英]Spinning wheel in jQuery
我正在使用以下代码来显示一个纺车:
$("#loading")
.hide()
.ajaxStart(function(){
$(this).show();
setTimeout("3000");
})
.ajaxStop(function(){
$(this).hide("slow");
})
;
和:
<div id="loading">
<img src="loading.gif" alt="Loading" />
</div>
问题:“ setTimeout()无法正常工作。如何在网页中心显示图像?”
setTimeout
有2个参数,第一个是callback
函数,第二个是以毫秒为单位的timeout
,例如。
setTimeout(funcname,1000);
要么
setTimeout(function(){
//do stuff
},1000);
要在网页中央显示您的图片,您可以使用例如 这种技术
#loading {
position:absolute;
top:50%;
left:50%;
width:100px;
margin-left:-50px; //negative half of width
height:80px;
margin-top:-40px; //negative half of height
}
#loading {
display: none;
position: fixed;
top: 48%;
left: 48%
}
JS
$('#loading').ajaxStart(function(){
var that = $(this)
setTimeout(function() {
that.show();
}, "3000");
}).ajaxStop(function(){
$(this).hide("slow");
})
我不明白您为什么使用计时器,您可以在ajax请求开始时将其打开,然后在成功或错误时将其关闭,例如:
$('#loading').show();
$.post(url, request)
.success(function(data) {
$('#loading').hide();
// Do what you want with data
})
.error(function(data) {
$('#loading').hide();
// Show error message
});
要在页面中间放置加载图片,请确保其容器位于100%高度的父级内,如果是嵌套的,请确保其父级都不position:relative
。
#loading {
position:relative;
width:100%;
height:100%;
}
#loading img {
margin-top: -12px; // Half images height;
margin-left: -12px; // Half images width;
position:absolute;
top:50%;
left:50%;
}
OR
#loading {
width:100%;
height:100%;
}
#loading img {
width:24px // Images width
height:auto; // If Image size changes don't mess with proportions
margin:0 auto;
margin-top:48%;
}
您以错误的方式使用SetTimeout函数
setTimeout(function(){ // do sth }, 3000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.