Jquery Spinner不适用于Chrome

时间:2013-05-13 09:45:30

标签: jquery jquery-ui browser spinner

我已经实现了Jquery微调器,但它在Firefox上工作正常,但在Chrome上不起作用。 我创建了两个名为start spinner和stopSpinner的函数 这是我的代码

function startSpinner(){
$(document).ready(function() {
console.log('spinner should be getting shown now');
$('#spinner').show();
});
}


function stopSpinner(){
$(document).ready(function() {
console.log('spinner should be getting shown now');
$('#spinner').hide();
});
}

Css Class

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

HTML

<div id="spinner" class="spinner">
<img id="img-spinner" src="images/spinner.gif" alt="Loading" />
</div>

所以无论何时我想打电话,我都会说 startSpinner(); 和StopSpinner();

由于

2 个答案:

答案 0 :(得分:0)

你为什么使用

$(document).ready();

这两个功能? 从jquery文档(http://api.jquery.com/ready/) - “指定在DOM完全加载时执行的函数”。 所以我没有看到两次使用它的原因,我认为这样的事情会更好:

$(document).ready(function() {
    $('#spinner').show();
});

$(document).on('click', function() {
    hideSpinner();
});

function showSpinner() {
    console.log('spinner should be visible');
    $('#spinner').show();
}

function hideSpinner() {
    console.log('spinner should disappear');
    $('#spinner').hide();
}

我使用了click事件来删除微调器,但它可能是任何事件(例如:ajax已完成加载,img已加载,登录过程已完成或其他任何事件)。 Dom准备就绪意味着“一旦dom树准备好就做点什么”。

答案 1 :(得分:0)

$(document).ready在这里不需要我不认为?

我将如何做到这一点:

function startSpinner (){
    $('#spinner').show();
}

function stopSpinner (){
    $('#spinner').hide();
}



$(function(){
    $('#on').click(startSpinner);
    $('#off').click(stopSpinner);
});

假设您添加了两个新按钮:

<input type="button" id="on" value="on" />
<input type="button" id="off" value ="off" />

这是一个jsfiddle演示:

http://jsfiddle.net/RkxKA/

$(function() { ..部分是在文档加载时执行该功能 - 我认为这是你想要的$(document).ready。在这里我用它来点击事件处理程序。

如果这对您没有意义,请告诉我;)

编辑:看来你现在有jQuery部分工作,但仍然存在gif没有动画的问题

我想也许这可能与chrome严格关于你如何展示它有关: https://superuser.com/questions/118656/are-animated-gifs-supported-in-google-chrome

在上面的链接中,他们谈论要检查的事情,包括重复设置。

或者只是Chrome版本中的错误? - 可能值得提出一个新问题,以便从了解该特定问题的其他人那里获得帮助。