Why does my overlay appear After the page is fully loaded? I want it to appear as its loading1

http:开发者_JAVA技巧//pastebin.me/28a2be0b8fd0991a6085eb9a731c7dc2

Hi.

I'm trying to use the example above to display a modal dialog while my page is loading. The only problem is that the modal dialog ONLY displays AFTER the full page has been loaded.

I know I must be missing something silly, any ideas?

Thanks

The reason why @Ibu says it wont work unless you create the content dynamically is because the javascript wont run until after the page has loaded... well you are wanting javascript to run before the page is loaded... if you are doing the traditional method of loading page you kinda are stuck in a catch-22. Run javascript before page is loaded, nothing is loaded so there is no javascript!

My suggestion would be to load the page with the modal already in place, actually part of the HTML code... then simply have the javascript remove the modal after the page has loaded.

$(handler) will not run until the DOM ready event, which is before rendering is complete, but not the earliest point you can start running code.

All three of the following syntaxes are equivalent ...

http://api.jquery.com/ready/