1

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

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

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

这是怎么回事？

4

4 回答 4

4

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

（注意：在这篇文章的最后，我编辑了一个新的答案来修复动画.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 页面加载时保持微调器 div 的可见状态。首先在 jQuery 初始化函数中隐藏它。然后，您可以随时显示+隐藏微调器 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>
于 2013-03-26T18:46:52.880 回答
0

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

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

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

</div>

脚本

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*/
于 2014-08-11T10:51:07.030 回答
0

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

var d = $('<div><img src="spinner.gif"/></div>');
d.dialog({modal:true});
于 2012-05-09T17:51:14.827 回答
0

我正在做这样的事情：

$('#someDiv').css('background', '#ddd url("Images/loading.gif") no-repeat 8.1em 50%');
于 2012-07-31T17:38:32.640 回答