2

Jquery スピナーを実装しましたが、Firefox では正常に動作しますが、Chrome では動作しません。start spinner と stopSpinner という2つの関数を作成しました これが私のコードです

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 はここでは必要ないと思いますか?

これが私がそれを行う方法です：

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

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



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

2 つの新しいボタンを追加するとします。

<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 にはまだ問題があります。

これは、クロムが表示方法に厳密であることと関係があるのではないかと思います: https://superuser.com/questions/118656/are-animated-gifs-supported-in-google-chrome

上記のリンクでは、繰り返し設定を含む確認すべきことについて話しています。

または、クロムのバージョンの単なるバグですか？-おそらく、その特定の問題について知っている他の誰かから助けを得るために、新しい質問をする価値があります。

于 2013-05-13T10:04:52.190 に答える
0

なぜあなたは使っているのですか

$(document).ready();

これらの両方の機能で？jquery のドキュメント ( http://api.jquery.com/ready/ ) から - 「DOM が完全にロードされたときに実行する関数を指定してください。」したがって、2回使用する理由がわかりません。次のような方がよいと思います。

$(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 ツリーの準備ができたらすぐに何かをする」という意味です。

于 2013-05-13T10:02:04.567 に答える