当我调用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