How do you display animated GIFs within a jQuery D

2020-02-06 04:48发布

站内问答 / jQuery
1702 4 4

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?

4条回答
该账号已被封号
2楼-- · 2020-02-06 05:01

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*/
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
3楼-- · 2020-02-06 05:04

I'm doing something like this:

$('#someDiv').css('background', '#ddd url("Images/loading.gif") no-repeat 8.1em 50%');
查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
4楼-- · 2020-02-06 05:09

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});
查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2020-02-06 05:10

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)