當我調用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