数据渲染时IE浏览器中的进度条.GIF图像冻结

Question

当我的网页刷新或发生任何回发时，我正在使用进度.GIF图像我显示进度条并且它工作正常但是当数据渲染时.GIF图像在IE浏览器中冻结。

以下是html Code。

<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将结果发送到浏览器。