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类将出现在页面加载时显示的元素/ 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类将在页面加载之前和之后应用，每个类中包含的内容取决于您想要查看的内容。

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

2 个答案: