如何在IE中的jQuery對話框中顯示動畫GIF？

我們有以下代碼似乎工作在每一個瀏覽器就好了，除了IE：如何在IE中的jQuery對話框中顯示動畫GIF？

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

在IE似乎工作得很好，除了微調不旋轉（這是一個GIF動畫）。

發生了什麼事？

來源

2012-05-09 Randyaa

我相當肯定這是關係到圖像被「渲染」作爲第一隱藏，然後使用「對話」功能顯示。 – Randyaa

也許在遏制div（而不是內容本身）上執行這些操作就可以做到這一點。我從來沒有遇到過用動畫gif顯示模態div的問題。

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

來源

2012-05-09 17:51:14 Dutchie432

你的例子實際上是代碼，我簡化了它的問題。 – Randyaa

我在做這樣的事情：

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

來源

2012-07-31 17:38:32

我想「一切」，但animation.gif微調沒有在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>

來源

2013-03-26 18:46:52 Whome

我發現了一個爲什麼spinner.gif動畫在Firefox中不起作用的原因。 Html頁面已加載並且默認微調器CSS處於隱藏狀態。當div被設置爲可見時，Firefox不會爲其設置動畫效果。在html加載時保持spinner div可見，並立即隱藏在$ {} jquery onLoadCompleted處理程序中。然後div顯示/隱藏狀態和gif動畫工作正常。 – Whome

即時通訊對不起，但即時通訊這種事情的新手，我將如何實現這個在我的網頁？即時通訊也遇到了同樣的問題 – user2705620

Assh O. Le：請參閱我的回答，我已經使用jQuery + spinner.gif圖像編輯了一個示例html。使用你喜歡的任何gif動畫。 – Whome

我遇到同樣的問題。在打開對話框之前將它設置爲src。

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

來源

2014-08-11 10:51:07 Udhayavardhane

如何在IE中的jQuery對話框中顯示動畫GIF？

回答

相關問題