Question

我已经实现了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（）;

由于

Answer 1

你为什么使用

$(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树准备好就做点什么”。

Answer 2

$（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版本中的错误？ - 可能值得提出一个新问题，以便从了解该特定问题的其他人那里获得帮助。

Jquery Spinner不适用于Chrome

2 个答案: