jquery微調不能在Chrome上工作

Question

我已經實現了Jquery微調，但它在Firefox上工作正常，但不適用於Chrome。 我已經創建了兩個函數調用start微調和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> 

所以每當我想打電話給我用 startS平納（）; 和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() { ..部分是在docume時執行那個函數nt負荷 - 我認爲這是你打算與$(document).ready。在這裏我使用它來註冊事件處理程序與點擊事件。

讓我知道這是不是你決策意識;）

編輯：看來你擁有jQuery的部分現在的工作和仍然存在與GIF在Chrome

我覺得不是動畫的問題也許這可能與鉻是嚴格的如何顯示它： https://superuser.com/questions/118656/are-animated-gifs-supported-in-google-chrome

在上面的鏈接，他們談論的東西，檢查包括重複設置。

或者可能只是鉻版本中的錯誤？ - 可能值得問一個新的問題，以從知道這個特定問題的其他人那裏獲得幫助。