Jquery\PHP hide page rendering until all is ready

Question

I have a page with 4 columns, each of which is called by jQuery Ajax. Each is also an accordion.

I want to hide everything (maybe behind a full page "loading" screen) until everything is drawn and especially the functionality of the accordions is done so the page does not appear a mess.

I tried adding

$('body').css('display', 'none');

before the calls and then

$('body').css('display', 'block');

after but it did nothing.

Code:

$(document).ready(function() { 
    $('body').css('visibility', 'hide');
    $("#boards").load("boards.php?id=<?php echo $id; ?>");          
    $("#components").load("components.php");    
    $("#activities").load("activities.php"); 
    $("#tasks").load("tasks.php");
    $('body').css('visibility', 'show'); 
});

Ajax is async, right?! Your question seriously missing some context. How do you call `$('body').css('display', 'block');`? — A. Wolff, Nov 04 '15 at 10:47
Try visibility hide instead, like explained here: http://stackoverflow.com/questions/9550760/hide-page-until-everything-is-loaded-advanced — vacsora, Nov 04 '15 at 10:51
better that you cover the page with a loading div than hidding the body — madalinivascu, Nov 04 '15 at 10:51
anyone a piece of code for the full screen loading div which I can hide when all is ready? — Jim, Nov 04 '15 at 10:59
The problem is `$('body').css('visibility', 'hide');` and `$('body').css('visibility', 'show');` they are not valid values form the visibility property. Use: `hidden` or `visible` alternatively, use jQuery: `$('body').hide();` `$('body').show();` Also your calls to load are async, so you should use a callback or collection of promises to show the page. — DickieBoy, Nov 04 '15 at 13:11

score 0 · Answer 1 · answered Nov 04 '15 at 10:49

Show loader on screen to hide other stuff.Create one variable, initialize it with 0 before ajax. Inside each ajax success function increment the same variable.

After ajax, write a setInterval function and in that function check whether the variable is equal to 4. If it is then only remove or hide the loader.

FrancoisBaveye · Answer 2 · 2015-11-04T11:50:00.753

You can place a full screen div on top of your page and remove it when everything is loaded.

CSS :

#full-loader
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    top: 0;
    left:0;
    z-index: 9001;
}

HTML :

<div id="full-loader">
    <h1>Loading ...</h1>
</div>

JS :

$('#full-loader').hide(); // Only hides the div in case you want to reuse it
$('#full-loader').remove(); // Removes the div

Mi-Creativity · Answer 3 · 2015-11-04T12:09:38.320

Not trying to underestimate other answers if you load jQuery in the head and you write $('#preload').hide(); right after preload div then other answers will work just fine, but in my opinion if you are including jQuery at the bottom of the page then your attempt to show the preloader div is useless because the DOM is already loaded.

But in case you are loading jquery with your js code at the bottom of the page right before the closing body tag, then I think you better do it this way:

CSS:

#preload{
        width:100%;
        height:100%;
        position:fixed;
        background-color:#222;
        display:none;
        color:#EEE;
        font-size:4em;
        text-align:center;
        padding-top:200px;
        z-index:1000;
    }

HTML:

<body>
    <div id="preload">...Loading...</div>
    <script>document.getElementById("preload").style.display = "block";</script>

    <!-- .......... Your content here ........ -->

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $('#preload').hide();
    </script>
</body>
</html>

with the above code, put the #preload right after body as the first child, then right after that with raw javascript we turn its display to block - considering you are going to load jquery on the bottom of your page, it is not loaded at this stage yet so it wouldn't work if you use jquery hence why raw JS -, when you reach the bottom of your webpage you can use .hide() to trigger the display back to none, or as Heru-Luin mentioned you can use .remove() to remove it. of course you can still use raw javascript to do the same.

Jquery\PHP hide page rendering until all is ready

3 Answers3