Jquery Spinner 在 Chrome 上不起作用

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 类

.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();
}

我使用点击事件来移除微调器，但它可以是任何事件（例如：ajax 已完成加载、img 已加载、登录过程完成或其他任何事件）。 Dom ready 只是意味着“一旦 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 部分现在正在工作，但 Chrome 中的 gif 没有动画仍然存在问题

我认为这可能与 chrome 对显示方式的严格要求有关： https://superuser.com/questions/118656/are-animated-gifs-supported-in-google-chrome

在上面的链接中，他们谈到了需要检查的内容，包括重复设置。

或者可能只是 chrome 版本中的一个错误？ - 可能值得提出一个新问题，以获得了解该特定问题的其他人的帮助。