AJAXメソッドを呼び出すと、私のアニメーションGIFがアニメーション化されないのはなぜですか？

以下のコードを使用すると、AJAXデータが読み込まれている間にダイアログが正しく表示されますが、アニメーション化されたGIFはアニメーション化されません。AJAXメソッドを呼び出すと、私のアニメーションGIFがアニメーション化されないのはなぜですか？

CSS：

.loading { 
    background: url('/images/loading.gif'); 
}

はJavaScript：

$(function() { 
    $("#createButton").click(function(e){ 
     e.preventDefault(); 

     var $form = $(this).closest("form"); 

     $("#pleaseWait-dialog").dialog({ 
      modal: true, 
      height: 200, 
      resizable: false, 
      draggable: false 
     }); 

     $.ajax({ 
      type: "GET", 
      url: "myScript.cfm", 
      async: true, 
      success: function() { 
       $form.submit(); 
      } 
     }); 

     return false; 
    }); 
});

HTML：

<form action="post.cfm" method="post"> 
    <input 
     id="createButton" 
     type="submit" 
     name="createButton" 
     value="Create a New Thing" /> 
</form> 
<div id="pleaseWait-dialog" title="Gathering Data" style="display:none;"> 
    <span class="loading"></span> 
    <p>Thank you for your patience while we gather your data!</p> 
</div>

出典

2011-07-19 Eric Belair

あなたのアニメーションGIFはどこですか？私はどこにGIFへの参照を見ることができません...あなたがスタイルを介して追加している場合は、背景画像としてのGIFがアニメーション化されるかどうかはわかりません... – Chris

GIFはCSSです（私は、）。参考までに、GIFは背景画像としてアニメ化されます。 –

は時にユーザーがクリックとAjaxリクエストが終了した後、それを隠してそれを表示してみてください。

$(function() { 
$("#createButton").click(function(e){ 
    $('#pleaseWait-dialog').show(); 
    e.preventDefault(); 

    var $form = $(this).closest("form"); 

    $("#pleaseWait-dialog").dialog({ 
     modal: true, 
     height: 200, 
     resizable: false, 
     draggable: false 
    }); 

    $.ajax({ 
     type: "GET", 
     url: "myScript.cfm", 
     async: true, 
     success: function() { 
      $form.submit(); 
     } 
    }); 

    return false; 
    }); 
});

出典

2011-07-19 16:52:57 ParparDromi