進度條.GIF圖像在數據呈現時在IE瀏覽器中凍結

Question

當我的網頁刷新或任何回發發生時，我正在使用進度.GIF圖像我顯示進度條，它工作正常，但當數據呈現時。 GIF圖像在IE瀏覽器中凍結。

以下是html代碼。

<div class='overlay' id="cleintSideOverlayMain"> 
<div class="modal-progress"> 
<div class="progress-bar"> 
<img id="OverlayImage" src="/images/ajax-loader.gif" /> 
</div> 
</div> 
</div> 

這是我所有數據呈現時的客戶端代碼。

$('#cleintSideOverlayMain').css('display', 'none'); 

我也試過。 1）spin.js 2）使用SetTimeout（）; 3）使用Iframe。 4）HTML5動畫。

Answer 1

我認爲渲染是用Javascript完成的：Javascript使用單線程。這意味着UI和渲染使用相同的線程，並且在渲染正在工作時，UI被阻止。這會凍結你的進度條。

在HTML頁面中執行腳本時，頁面變得無響應 ，直到腳本完成。

目前有兩種解決方法我知道：

1. 如果用戶只使用modern browsers可以使用web workers。然後，您可以使用另一個線程進行渲染（工作線程）。

2. 如果可能的話，您可以在客戶端渲染，並只使用AJAX將結果發送到瀏覽器。