3

スピナーGIFを含むjQueryUIダイアログを表示しようとしていました。元々、GIFはHTMLで静的にコーディングされていました。

<div id="LoadingDiv" style="display:none; text-align: center">
    <img alt="Loading..." src='/Content/images/ajax-loader.gif' />
</div>

ただし、IEには、jQueryUIダイアログでGIF画像を正しくアニメーション化できないという既知の問題がありました。そのため、要素を動的にimg要素に追加することにしましたdiv。

$("#FilterForm").submit(function (){
    $("#LoadingDiv").html($("<img>").attr({ 
        'id':'spinner', 
        'alt':'Loading...',
        'src': '@Url.Content("~/Content/images/ajax-loader.gif")'
    }));
    $("#LoadingDiv").dialog("open");
});

これにより、システムにいくつかの奇妙なバグが発生しました。フォームを送信すると、GIFが表示される場合と表示されない場合があります。誰かが助けることができますか？

4

1 に答える 1

0

Spin.jsを使用して回避策を実装することで解決しました。GIF は不要で、ブラウザ間の互換性が向上しています。

コード：

$("#FilterForm").submit(function (){
    var opts = {
        top: '10px',
        left: '50px',
        length: 2,
        width: 3,
        radius: 7
    };
    var loadingDiv = document.getElementById("LoadingDiv");
    var spinner = new Spinner(opts).spin(loadingDiv);

    $("#LoadingDiv").dialog("open");
});
于 2012-12-21T03:27:12.823 に答える