Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 240
Programmer XYZ Avatar asked Dec 05 '25 04:12

Programmer XYZ


1 Answers

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();
like image 77
Paul Draper Avatar answered Dec 07 '25 20:12

Paul Draper