Question

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

var d = $('<img src="spinner.gif"/>');
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 = "<div id='spinnerdiv'><div style='padding-left:35px'>" + str + "</div></div>";

    $("#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动画）这是我能够修复某些浏览器上没有动画的spinner.gif的方法。诀窍是在html页面加载时保持spinner div可见状态。在jQuery init函数中首先隐藏它。然后你可以随时显示+隐藏微调器div并将其设置为动画。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Spinner Test</title>
  <script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
    var spinner = $("#spinner");
    spinner.hide();
    $("#btnShow").click(function() { onShowClicked(); return false; });
    $("#btnHide").click(function() { onHideClicked(); return false; });
});

function onShowClicked() {
    var spinner = $("#spinner");
    spinner.show();
}

function onHideClicked() {
    var spinner = $("#spinner");
    spinner.hide();
}
</script>
</head>
<body>

<a href="" id="btnShow">SHOW</a> &nbsp;&nbsp; <a href="" id="btnHide">HIDE</a>

<br/><br/>
<div id="spinner"><img src="loader.gif" /></div>

</body>
</html>

Answer 2

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

var d = $('<div><img src="spinner.gif"/></div>');
d.dialog({modal:true});

Answer 3

我正在做这样的事情：

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

Answer 4

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

<div id="dvprocessing" style="display:none;">

  <img id="ProcessImg" src="Images/Processing.gif" alt=""/>

</div>

的Jscript

document.getElementById("ProcessImg").src = "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*/

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

4 个答案: