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

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

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

在IE中它似乎工作得很好,除了微调器不旋转(它是一个动画GIF).

这是怎么回事？

解决方法

我试过“一切”但是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函数中隐藏它.然后你可以随时显示hide spinner 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>

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

解决方法

相关文章