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

I am using requireJS domReady plug in to show jQuery loading progress on asp.net web page.

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

Here is the code that I am using,

这是我正在使用的代码,

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

Problem: jQuery loading progress is showing good, but it will only start after HTML controls loaded on the page. Behind the scenes some java script are still being loaded.

问题:jQuery加载进度显示良好,但它只会在页面上加载HTML控件后启动。在幕后,一些java脚本仍然被加载。

Once the HTML (for example a button) loaded, the jQuery loading progress stars and dis-appears after all the libraries are loaded. I want to show jQuery loading progress as soon as a page is requested. Any suggestions?

一旦加载了HTML(例如按钮),jQuery加载进度就会在加载所有库之后出现并消失。我想在请求页面时立即显示jQuery加载进度。有什么建议?

2 个解决方案

#1

You can use the jQuery onload function:

您可以使用jQuery onload函数:

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

And the preLoad class will be on your element/gif that displays as the page is loading, and after it's finished loading, it will display afterLoad

preLoad类将在你的元素/ gif上显示,当页面正在加载时,在加载完成后,它将显示在afterLoad之后

In your CSS, you would have:

在您的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;
}

In your HTML you would have:

在您的HTML中,您将拥有:

<div class="preLoad">

And the preLoad/afterLoad classes would get applied after and before the page loads, and what's contained in each depends on what you want to see.

并且preLoad / afterLoad类将在页面加载之后和之前应用,并且每个类中包含的内容取决于您想要查看的内容。

#2

You could use a fixed div with a visible loader (e.g. an animated gif) by default and then hide it once the page has loaded.

您可以默认使用带有可见加载器的固定div(例如动画gif),然后在页面加载后隐藏它。

#1