jQuery中的纺车答案

【问题标题】：Spinning wheel in jQueryjQuery中的纺车
【发布时间】：2017-12-25 11:42:17
【问题描述】：

我正在使用以下代码来显示一个纺车：

$("#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() is not working"...你希望它做什么？
setTimeout 的用法是必须给它提供暂停后执行的函数。

标签： javascript jquery settimeout

【解决方案1】：

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
}

【讨论】：

【解决方案2】：

我不明白你为什么要使用计时器，你可以简单地在 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%;
}

【讨论】：

【解决方案3】：

#loading {
   display: none;
   position: fixed;
   top: 48%;
   left: 48%
}

$('#loading').ajaxStart(function(){
   var that = $(this)
    setTimeout(function() {
       that.show();
    }, "3000");
}).ajaxStop(function(){
    $(this).hide("slow");
})

【讨论】：

【解决方案4】：

你错误地使用了 SetTimeout 函数

设置超时（函数（）{ // 做某事 }, 3000);

【讨论】：