-3

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

Server Side code - Ajax Loader
Client side code - ?

谁能告诉我如何做到这一点。感谢您的帮助。

4

2 回答 2

1

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

还可以尝试优化和缩小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

于 2013-05-30T08:13:39.030 回答
0

您可以通过多种方式执行此操作，在 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();

我希望这有帮助。

于 2013-05-30T08:14:06.643 回答