Question

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

Server Side code - Ajax Loader
Client side code - ?

任何人都可以告诉我如何做到这一点。谢谢你的帮助。

Answer 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

Answer 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();

我希望这会有所帮助。

如何为客户端代码添加客户端加载器

2 个答案: