How do you display animated GIFs within a jQuery Dialog in IE?

问题

We have the following code which seems to work just fine in every browser except IE:

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

In IE it seems to work just fine except the spinner doesn't spin (it's an animated GIF).

What's going on?

回答1:

I tried "everything" but animation.gif spinner did not work in jQueryUI modal dialog box. Some browsers were fine but it was Firefox refusing to work. Go figure whats the reason. Then found this super excellent non-img spinner component. Give all credits to fgnass.

(NOTE: At the end of this post I have edited a new answer fixing animation.gif problem)

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);   
}

I have run Firefox, IE8, Chrome, Opera, Android tablet (stock and firefoxbeta), Nokia Lumia800, Nokia C7 browsers. All works fine.

Edit 1 (use gif animation) This is how I was able to fix spinner.gif not animated on some browsers. Trick is to keep spinner div visible state at html page load. Hide it first thing in the jQuery init function. Then you may show+hide spinner div anytime you like and its animated.

<!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>

回答2:

Perhaps performing the actions on a containment div (as opposed to the content itself) would do the trick. I've never had a problem displaying a a modal div with an animated gif.

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

回答3:

I'm doing something like this:

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

回答4:

I have experience the same issue. Got it sorted setting the src just before opening the dialog.

<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*/

来源：https://stackoverflow.com/questions/10521382/how-do-you-display-animated-gifs-within-a-jquery-dialog-in-ie

标签

jquery

internet-explorer

dialog

animated-gif