在IE中提交動畫問題

我以前一直在處理這個問題，但似乎問題出現了。讓我解釋。在IE中提交動畫問題

我有一個網頁，可以讓用戶上傳一個大文件，之後，ASP.NET服務器端腳本也可能需要幾秒鐘來處理它。與此同時，我想在Web瀏覽器中顯示加載器/微調器動畫，以防止用戶再次點擊提交按鈕。

我用下面的jQuery代碼：

$('#ButtonImportData').click(function() { 
    $('.importSubmitSpinner').css('display', 'inline'); 
}

這裏是爲微調圖片的HTML：

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" />

和這裏的CSS：

.importSubmitSpinner 
{ 
    margin: 0px 10px 0px 6px; 
    width: 28px; 
    height: 28px; 
    display: none; 
}

spinner_big.gif是一個簡單的帶有動畫的GIF文件用於指示用戶正在加載頁面。

上述方法適用於幾乎所有的瀏覽器，除了...猜猜哪一個？是的，IE！在IE中發生的事情是，在用戶點擊ButtonImportData按鈕後，顯示了微調器，但動畫立即停止，基本上給用戶一個虛假的指示，表明一個頁面被掛起，這提示他們再次單擊提交 - 與我相反想做。

很久以前我停止使用IE，但顯然還有大約一半的互聯網社區仍在使用它。男人，人們如何使用這塊* & ^％？無論如何，這不是一個問題:)問題是，如何使這個簡單的任務在IE中工作，並使我的動畫真正發揮？

PS。我一直在用IE 9或任何測試它是Windows 7

編輯當前的「網絡之美」：

感謝，ShadowScripter，我找到了解決辦法。下面是我工作：

1以下內容添加到HTML以確定我們是否在IE瀏覽器上運行（因爲我們不需要做這個「黑客」對任何其他網絡瀏覽器）：

<![if !IE]> 
<script type='text/javascript'> 
var bNotIE = 1; 
</script> 
<![endif]>

2我們需要ID添加到img元素：

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" id="imgSpinnerImport" />

3然後以顯示GIF動畫：

$('#ButtonImportData').click(function() { 
    //For "normal" browsers 
    $('.importSubmitSpinner').show(); 

    if (typeof (bNotIE) == 'undefined') { 
     //The following must be done only in case of IE 
     //NOTE: We need to load the same file but with a different name 
     // because if you don't change the file name it won't work! 
     setTimeout('document.images["imgSpinnerImport"].src = "Graphics/spinner_big_ie.gif"', 200); 
    } 
}

來源

2012-04-10 ahmd0

你在說哪個版本的IE？你有沒有試過jQuery BlockUI插件。它似乎是瀏覽器兼容... http://jquery.malsup.com/block/ – 2012-04-10 07:41:49

IE 9 ............ – ahmd0 2012-04-10 07:42:31

我似乎無法在任何IE版本中複製您的問題。

Here's the live example我測試了它。

可以有很多不同的原因，爲什麼你不工作。

其他代碼可能會干擾
GIF圖像故障
客戶端計算機;工作量

哦也，

可以使用.show()，而不必做.css("display", "inline")事情。
如果沒有指定元素，JQuery可以識別元素應該具有哪種默認顯示模式。

來源

2012-04-10 10:41:23 ShadowScripter

這完全讓我感到困惑。這裏可能是什麼情況？在這個簡單的例子中，它工作得很好。我從腳本運行相同的腳本，相同的圖像等，它不會旋轉！在我的情況下，該頁面是由ASP.NET腳本組成的，如果將其打開以查看爲HTML，則會添加大量垃圾/垃圾......該死，MS！ – ahmd0 2012-04-10 20:00:09

在任何情況下，問題都與您提供的不符。除非你想讓我調試你的整個站點，否則我沒有太多的工作可以幫助，而且我並不是那樣的人） – ShadowScripter 2012-04-10 20:02:44

我更新了它在代碼中的樣子，它在那裏工作：http：// jsfiddle .net/HPW9R/2但爲什麼不在我的網頁？這只是迫使我浪費時間在這個*＆^％!!!! – ahmd0 2012-04-10 20:04:04

由100ms的defore實際顯示圖像裝載機試試這個它的偉大工程......

setTimeout(function() { 
    ('.out').css("display","none");  
    $('#load').show();   
    return true; 
}, 100);

延遲。

來源

2013-06-21 13:31:14 Umi

這是@ShadowScripter上面的鏈接所做的（檢查註釋。）順便說一下，仍然不能在IE10中工作，或者現在是什麼...... – ahmd0 2013-06-21 16:46:06

This具體的解決方案幫助我的非asp相關問題。謝謝！ – 2013-07-02 17:46:00

在IE中提交動畫問題

回答

相關問題