Home » Jquery » Using javascript/jquery, is there a way to stop the rest of a webpage from loading until the header section is loaded?

Using javascript/jquery, is there a way to stop the rest of a webpage from loading until the header section is loaded?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a header (with a video inside), and the header is constructed using a plugin (I am on WordPress). When viewing the website on mobile, the header section takes some time to load, during which the rest of the content fills the empty space. When the header is finally loaded everything realigns as it should (the whole thing takes like 4 seconds).

However, the client prefers the rest of the page is loaded only after the header is there. Is there some javascript/jquery way of doing this that I am missing? Thank you.

Assume the page is constructed this way:

<html>
<head>...</head>
<body>
<section class="header">...</section>
<section class="section1">...</section>
<section class="section2">...</section>
<section class="section3">...</section>
</body>
</html>
How to&Answer:

How about this?

$(".header").ready(function(){
  $(".section1).show();
  $(".section2).show();
  $(".section3).show();
})

Answer:

As Heretic Monkey suggested, use jQuery’s ready() function.

A rudimentary implementation would be to update your section classes to display:none and then in your script for this page:

$(document).ready(function() {
  $(".section1).show();
  $(".section2).show();
  $(".section3).show();
});

I believe the default implementation of show() is to set display:block so if you wanted a different value for that property like inline then you can set the value manually through the selector like:

$(".section1").attr('style', 'display:inline');