How to stop a webpage from loading until all jQuery load functions are complete?


Tags: javascript,jquery,html,css

Problem :

I am working on my first large website and having some problems on how to scale it. I figured that using jQuery to piece together each page (200+ pages). Most elements that appear on every page are made in a seperate html file and then loaded using jQuery.load. The benefit is that I only have to make changes in the file once and it will change on every page (is there a better way?). If this is an acceptable way, how do I stop the page from loading the standard html/css first? Currently, the page loads the background, and a few of the elements that are unique to each page and then loads the other html file elements afterwards - which makes it look unprofessional and annoying.

Thanks!



Solution :

is there a better way?

Yes. You can have your server do this, though it will depend on you backend language/framework: PHP, Python Django, etc.

(If you are just serving through the webserver, without any server programming, then I suppose something like .load() is your only option.)

BTW, content management systems like Drupal are made to solve this problem, without having to write code.


how do I stop the page from loading the standard html/css first?

If you want to stop anything from showing until you are ready, add to your body tag

<body style="display:none">

And then when you are ready,

$('body').show();

    CSS Howto..

    How to test a web designer on css layouts?

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    Normalized CSS, option in JSFiddle, how to add it to document

    CSS flexbox: How to get column items to fill height

    How to Center Logo in Responsive Header [closed]

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    How to move div to top and remove?

    Styling the placeholder of an input, how can I do this? [duplicate]

    How to achieve this awesome CSS animation

    Making dijit.Dialog Transparent when it shows up

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    CSS How to change background color of text?

    Does anyone know how to store a css change made by javascript function locally?

    How to use box shadow in css?

    How to have an array of images side by side using css/html

    CSS: how do I position my slideshow counter up into the slideshow

    How to make a div one on the top and one on the bottom touching

    How to create a global settings file in react css modules

    How to make link change the css in the following page [closed]

    How to slide a div out

    how to avoid the ID name in css file

    CSS Selector-How to locate Parent Element

    How to force a button inside a div not to inherit the parent CSS?

    How to keep button active after press with jQuery

    How to style SVG via css?

    How to create a responsive design with CSS only

    How to underline list items separately with CSS?

    How to use Bootstrap style of BreadCrumb with my ASP.NET menu?

    How do I remove white space due to position relative of CSS?

    How hard is it to master semantic markup and good CSS?