0

私は次のCSSを持っています:

#load-icon
{
    background: url(/Images/loaders/mask-loader.gif);
    background-repeat: no-repeat;
    z-index: 99; width: 32px; height: 32px;
    z-index: 99; 
    margin-top: 9px;
    margin-bottom: 9px;
    margin-right: 5px; 
    display: none;
}

次のコードを使用して、表示および非表示にしていました。

$(document).ajaxStart(function () {
    $('#load-icon').show(500);
});
$(document).ajaxStop(function () {
    $('#load-icon').hide();
});

ただし、背景は間隔に使用され、非表示の場合、#load-icon はスペースを使用しません。これは私が望むものではありません。

#load-icon が常に 32px のスペースを使用し、gif が表示または非表示になるようにするにはどうすればよいですか? フェードインやフェードアウトの長さについてはあまり気にしません。

使用されている場所を示すフィドルは次のとおりです。

更新：背景画像をなしに設定してからgifに戻す必要のない方法が本当に必要です。これは、さまざまな CSS スタイルを使用している可能性が高く、gif 名を JavaScript にコーディングできないためです。

4

2 に答える 2

2

jquery background none に設定する必要があります。つまり

$(document).ready(function(e) {
    var loadicon = $('#load-icon').css('background');
    $('#load-icon').css('background','none');

    $(document).ajaxStart(function () {
        $('#load-icon').css('background',loadicon);
    });
    $(document).ajaxStop(function () {
        $('#load-icon').css('background','none');
    });
});
于 2012-09-12T07:59:49.523 に答える
1 
$(document).ajaxStart(function () {
    $('#load-icon').fadeTo(0,0.0);
});
$(document).ajaxStop(function () {
    $('#load-icon').fadeTo(0,1.0);
});
于 2012-09-12T08:20:41.050 に答える