Please wait content won't load until page is fully loaded

Question

I'm trying to use the normal approach to create an element and hide it using jQuery once the page finished loading.

You can see this basic approach in many places but here's the code anyway:

DIV for the image I'd like to display while the page loads, right after the <body> tag:

<div class="pleasewait"></div>

To remove the icon from the screen after the page loads, in the HEAD section of the HTML page:

$(window).bind("load", function() {
    $(".pleasewait").fadeOut("slow");;
});

CSS to style the image in the center of the page:

.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pleasewait {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(img/ajax-loader.gif) center no-repeat #fff;
}

I get the nav bar on my PHP page to load ok but nothing on the <body> section is displayed until the page fully loads (including waiting for the server call to complete and form the remainder of the page).

While there are other fancier methods of achieving my goals, I would really like to understand what I'm doing wrong here.

_“but nothing on the section is displayed until the page fully loads”_ - so isn’t this what you wanted? Why else did you place an element all over on top of it? Unclear what you are actually asking here. — CBroe, Feb 09 '18 at 08:41
Or do you mean that your .pleasewait element itself doesn’t show? Well that would likely be due to the CSS for it not available earlier, if you put it into an external file. This is one of the situations where you should really inline the CSS. — CBroe, Feb 09 '18 at 08:43
I mean that the pleasewait element shows together with the rest of the page (and then fades away) once the page loads. I can't get it to load ahead of the rest of the page. — Paulo Hgo, Feb 09 '18 at 22:21
Ok, it's the other way around then. Still, the first approach to try and fix that would be: _"This is one of the situations where you should really inline the CSS."_ If that doesn't help, then you probably have more of an issue with how the server returns the document to the browser, then you're getting into the fun world of output buffering on script and/or web server level. — CBroe, Feb 10 '18 at 08:42

score 1 · Answer 1 · edited Feb 09 '18 at 08:18

1

HTML

<div id="preloader">
    <div id="status"> 
    </div>
</div>
<div id="wrappers">
    Welcome to page
</div>

CSS

#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #fff; 
    z-index: 999999; 
}

#preloader #status { 
    width: 70px;
    height: 70px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-image: url(images/loader.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
}

jQuery

$(document).ready(function(){
    $(window).load(function() {
        $('#status').fadeOut(); 
        $('#preloader').delay(100).fadeOut('fast');  
        $('#wrappers').delay(250).css({'overflow':'visible'});
    });  
});

edited Feb 09 '18 at 08:18

derHugo

83,094
9
75
115

answered Feb 09 '18 at 06:47

HTML Guruz

379
2
8

It doesn't work, plus I get a jQuery exception on the `$(window).load`. I'm using jQuery 3.1.1. The problem I have is that everything is displayed (including the please wait message) only after the whole page is loaded. – Paulo Hgo Feb 09 '18 at 06:54
Why do you wrap `$(window).load` within `$(document).ready`? This is totally redundant. @PauloHgo since [jQuery 3.0 they removed `load`](https://stackoverflow.com/a/8396457/7111561) so now it has to be used as `$(window).on("load", function () {......})` – derHugo Feb 09 '18 at 07:44
Also from [there](https://stackoverflow.com/a/8396438/7111561): `When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.` -> Could this be your problem? – derHugo Feb 09 '18 at 07:50
@derHugo Acknowledge. – HTML Guruz Feb 09 '18 at 07:53
I've looked at that. I guess that the real question then is how can I make something load prior to the rest of the page? This page is a PHP scrip that calls an API that takes a few seconds to respond. Then the rest of the body is built and displayed but I can't make the "Please wait" message or image load before. I can make it unload afterwards but it will load together with the rest of the page as it is in the BODY of the document. – Paulo Hgo Feb 09 '18 at 15:24

derHugo · Answer 2 · 2018-02-09T08:05:49.027

1

From the comments I saw you are using jQuery 3.1.1.

.bind() is deprecated since jQuery 3.0

Instead use

$(window).on('load', function(e){
    ....
})

Also make sure (from this answer and the jQuery API document):

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

edited Feb 09 '18 at 08:05

answered Feb 09 '18 at 07:54

derHugo

83,094
9
75
115

1

Thanks. That didn't help. I can make the "Please wait" image or text disappear after the page loads. What I can't make happen is have it load before the rest of the page is being put together through my PHP code. I'm probably missing something basic/fundamental here. – Paulo Hgo Feb 09 '18 at 15:26

Please wait content won't load until page is fully loaded

2 Answers2