javascript - 进度条 .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) 自旋.js2) 使用 SetTimeout();3) 使用 iframe。4) HTML5 动画。

Answer 1

我假设渲染是用 Javascript 完成的:Javascript 使用单线程。这意味着 UI 和您的渲染使用相同的线程，并且在渲染工作时，UI 被阻塞。那会卡住你的进度条。

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

目前我知道有两种解决方法:

1. 如果您的用户只使用 modern browsers你可以使用 web workers .然后，您可以使用另一个线程进行渲染(工作线程)。

2. 如果可能，您可以在客户端呈现并仅使用 AJAX 将结果发送到浏览器。