Cleaner way to disable page before javascript is loaded?

Question

I have a page where it has to load 3 files of javascript (which is quite big) before all the page element become accesible. If one of the link is clicked then the load stops and whole page will not load the script right.

I make a solution by masking the page with an overlay which makes the page black before all of it was loaded. So on top of my page I put

$(".black-overlay").show();

which is a div that mask my entire page with z-index of 9999. Then after the page was loaded, I put

$(function() { $(".black-overlay").hide(); });

which from sources I read is the same as document ready function, so the overlay dissappears after the page load.

My problem is, this only works sometimes. One case the overlay gone but the link is still broken (means the script is not loaded yet). Another case is sometimes the overlay will not show if: I move to another page, then back to the main page, at the main page the overlay must've shown again since the script must've loaded again. But sometimes, it works just fine.

Is there any cleaner solution to this problem?

[EDIT] This happens especially if the internet connection to the website is very slow.

You should use `$(window).load( function() { // your function });` — Muhammad Talha Akbar, Aug 21 '13 at 10:07
Do you use $ before jQuery was loaded? If you want your users to see a black screen until every script has loaded, you do not need javascript to enable a black screen, just show the black screen and then `jQuery(document).ready(function($){$(".black-overlay").hide();});` — Александр Фишер, Aug 21 '13 at 10:09
@FakeRainBrigand leave it man, I think `eric.itzhak` have already answered plus it is absolutely correct. — Muhammad Talha Akbar, Aug 21 '13 at 10:13

score 4 · Accepted Answer · answered Aug 21 '13 at 10:10

4

I would make body hidden on default, meaning : <body style="display:none;"> and on document load, make it visible(you can even fadein, which is always fun) :

$(document).load( function() { $('body').fadeIn(); });

Put it the latest you can in your code, and it will (hopefully) always work.

answered Aug 21 '13 at 10:10

eric.itzhak

15,752
26
89
142

Thanks, this works fine, except my question is: I have to change `document` to `window`. Is changing that going to be a problem? – user2002495 Aug 21 '13 at 10:28
Read this : http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load – eric.itzhak Aug 21 '13 at 10:30
Thank you for the link. I need to change it because for some reason (Which I don't know) using `document` is not working, the `display:none` is still there. – user2002495 Aug 21 '13 at 10:35

Cleaner way to disable page before javascript is loaded?

1 Answers1