在页面完全加载之前显示 jQuery 加载进度

Question

我正在使用 requireJS domReady 插件在 asp.net 网页上显示 jQuery 加载进度。

这是我正在使用的代码，

require(['domReady'], function (domReady) {
  domReady(function () {
    //Hide jQuery loading progress
  });
    //Show jQuery loading progress
});

问题：jQuery 加载进度显示良好，但只有在页面上加载 HTML 控件后才会开始。在幕后，一些 java 脚本仍在加载中。

加载 HTML（例如按钮）后，jQuery 加载进度会在加载所有库后显示并消失。我想在请求页面后立即显示 jQuery 加载进度。有什么建议吗？

Answer 1

您可以默认使用固定的 div 和可见的加载程序（例如动画 gif），然后在页面加载后隐藏它。

Answer 2

您可以使用 jQuery onload 函数：

$(window).load(function() {
    // Animate loading element
    $(".preLoad").fadeOut("afterLoad");
});

并且 preLoad class 将在您的 element/gif 上显示为页面正在加载，加载完成后，它将显示 afterLoad

在您的 CSS 中，您将拥有：

.preLoad {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/reloadImage.gif) center no-repeat #fff;
}

.afterLoad {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

在您的 HTML 中，您将拥有：

<div class="preLoad">

并且 preLoad/afterLoad classes 将在页面加载前后应用，每个中包含的内容取决于您想要看到的内容。

在页面完全加载之前显示 jQuery 加载进度

Show jQuery loading progress before page fully loaded

jquery

asp.net

requirejs

domready