2

我已经实现了 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();

谢谢

4

2 回答 2

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 ready 只是意味着“一旦 dom 树准备好就做某事”。

于 2013-05-13T10:02:04.567 回答
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。在这里，我使用它来注册带有 click 事件的事件处理程序。

如果这对您没有意义，请告诉我；）

编辑：看来你现在有 jQuery 部分工作，但 gif 仍然存在问题，在 Chrome 中没有动画

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

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

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

于 2013-05-13T10:04:52.190 回答