jQuery中的纺车 [英] Spinning wheel in jQuery

问题描述

我正在使用以下代码来显示旋转的车轮:

I am using following code to show a spinning wheel:

$("#loading")
.hide()
.ajaxStart(function(){

    $(this).show();
    setTimeout("3000");
})
.ajaxStop(function(){

    $(this).hide("slow");
})
;   

和:

<div id="loading">
            <img src="loading.gif" alt="Loading" />
</div>  

问题: "setTimeout()无法正常工作.如何在网页中心显示图像?"

Problem: "setTimeout() is not working. And how can I display the image at the centre of webpage?"

推荐答案

我不明白您为什么使用计时器，您可以在ajax请求开始时将其打开，然后在成功或错误时将其关闭，像:

I dont understand why you're using the timer, you can simply turn it on at start of ajax request, and then on success or error turn it off, like:

$('#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.

To have your loading image in the middle of the page, make sure that it's container is within a 100% height parent, and if it is nested, make sure none of its parents are 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%;
}

这篇关于jQuery中的纺车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！