如何在IE中的jQuery对话框中显示动画GIF？

我们有以下代码似乎在除IE之外的每个浏览器中都能正常工作：

var d = $(''); d.dialog({modal:true}); 

在IE中它似乎工作得很好，除了微调器不旋转（它是一个动画GIF）。

这是怎么回事？

Answer 1

我试过“一切”但是animation.gif spinner在jQueryUI模式对话框中不起作用。 有些浏览器很好但是Firefox拒绝工作。 去看看原因是什么。 然后发现这个超级优秀的非img微调器组件。 给fgnass所有的学分。

（注意：在这篇文章的最后，我编辑了一个新的答案修复animation.gif问题）

http://fgnass.github.com/spin.js/

http://twitter.com/fgnass

 // Show loading(processing) modal dialog function showLoading(sTitle, str) { if (sTitle==undefined) sTitle = "Processing"; if (str==undefined) str = "Processing..."; var strBody = "
" + str + "
"; $("#uidialog").html(strBody); $("#uidialog").dialog({ title: sTitle, modal: true, resizable: true, width: "auto", height: "auto", close: function(event, ui) { }, buttons: { "Close": function() { $(this).dialog("close"); } } }); // must use css spinner, animated gif did not work in every browser var opts = { lines: 11, length: 7, width: 3, radius: 4, corners: 1, rotate: 0, color: '#000', speed: 0.7, trail: 38, shadow: false, hwaccel: true, className: 'spinner', zIndex: 2e9, top: '0', left: '0' }; var target = document.getElementById("spinnerdiv"); var spinner = new Spinner(opts).spin(target); } 

我已经运行过Firefox，IE8，Chrome，Opera，Android平板电脑（股票和firefoxbeta），诺基亚Lumia800，诺基亚C7浏览器。 一切正常。

---

编辑1（使用gif动画）这是我能够修复某些浏览器上没有动画的https://stackoverflow.com/questions/10521382/how-do-you-display-animated-gifs-within-a-jquery-dialog-in-ie/spinner.gif的方法。 诀窍是在html页面加载时保持spinner div可见状态。 首先在jQuery init函数中隐藏它。 然后你可以随时显示+隐藏微调器div并将其设置为动画。

          SHOW    HIDE 

 
   

Answer 2

也许在包含div（而不是内容本身）上执行操作就可以了。 我从来没有遇到过显示带有GIF动画的模态div的问题。

 var d = $('
'); d.dialog({modal:true}); 

Answer 3

我正在做这样的事情：

 $('#someDiv').css('background', '#ddd url("Images/loading.gif") no-repeat 8.1em 50%'); 

Answer 4

我遇到过同样的问题。 在打开对话框之前对它进行排序设置src。

Jscript脚本

 document.getElementById("ProcessImg").src = "https://stackoverflow.com/questions/10521382/how-do-you-display-animated-gifs-within-a-jquery-dialog-in-ie/Images/Processing.gif"; $("#dvprocessing").dialog({ width: 149, height:125, modal: true, closeOnEscape: false, resizable: false, draggable: false, position: ['center', 'center'] }); $(".ui-dialog-titlebar").hide(); /*To hide the title bar*/