如何为客户端代码添加客户端加载器[关闭]答案

【问题标题】：How to add client side loader for client side code [closed]如何为客户端代码添加客户端加载器[关闭]
【发布时间】：2013-05-30 07:30:51
【问题描述】：

我有 2000 行 JavaScript 代码。当我运行这个 JavaScript 代码时，它会花费很长时间。现在我想在页面上显示加载器，同时执行这个像 ajax 加载器一样的 JavaScript。我简短地说我想要客户端代码的客户端加载器。

Server Side code - Ajax Loader
Client side code - ?

谁能告诉我怎么做。感谢您的帮助。

【问题讨论】：

客户端加载器....你的意思是什么？？？
您可以显示加载器并在函数回调结束时再次隐藏它
为什么不使用与 ajax 相同的旋转加载器图标？
您是否使用更新面板处理 ajax 请求？

标签： javascript jquery asp.net ajax loader

【解决方案1】：

所有现代浏览器都可以轻而易举地执行 2000 行 JS 文件。但是，如果在执行脚本时存在明显的用户延迟，大多数浏览器都会提供一个模式窗口，要求用户继续或停止脚本执行。

还可以尝试optimize and minify JS 文件以获得更高效的性能。

如果以上不满足您，请尝试执行以下操作：

HTML: 将以下 div 添加到您的 HTML 页面：

<div id="loadingPanel" class="loading-panel hidden"></div>

CSS：

.loading-panel {top: 0; right: 0; bottom: 0; left: 0;z-index: 100 !important;background: #fff url('../img/loading.gif') no-repeat center center;opacity:.7;filter: alpha(opacity=70);-moz-user-select: none;-webkit-user-select: none;}
.hidden {visibility: hidden !important;}

JS：在开始执行脚本或脚本中的函数之前，请执行以下操作：
```
$("#loadingPanel").removeClass("hidden");
```
脚本或函数调用结束后，执行以下操作：
```
$("#loadingPanel").addClass("hidden");
```

提示：尝试使用你最喜欢的 loading.gif

【讨论】：

谢谢你。这对我有很大帮助。

【解决方案2】：

您可以通过多种方式执行此操作，在 javascript 代码的顶部，您可以在正在更改/更新的元素中动态创建图像或在页面上创建 img 元素。

第一个 Jquery 示例：

$('the-element').html("<img src='ajax-loader.gif'>");

在这种情况下，元素作为 ajax 加载器开始，然后，在您的脚本更新元素时，元素将随之改变。这可能在某些情况下有效，但不是全部。

使用 Jquery 的第二个示例：

$('body').append("<img id='loading' src='ajax-loader.gif' style='position:fixed;left:50%;top:50%;'>");

在本例中，您将把它放在 javascript 代码的顶部，并根据 ajax 加载图像的大小调整样式，然后将它放在 javascript 代码的底部

$('#loading').hide();

或

$('#loading').remove();

我希望这会有所帮助。

【讨论】：

我 +1d 上面的答案，因为我们基本上给出了相同的答案。