javascript - How do I show a loading image before actual body load? -
I want to hide the body of my web page after being ready to display all the contents of the body tags of the web page I want to show it body, but by that time I want to show some loading image.
If for some reason the body content is not properly loaded then I want to show an error message.
What's the best way to do this in JavaScript?
It's really easy to get a full screen div
And have to hide it after triggering the onload
function.
& lt;! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // N" "http://www.w3.org/TR/html4/strict.dtd"> & Lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; # Loading-overlay {status: complete; Z-index: 1000; Height: 100%; Width: 100%; Left: 0; Top: 0; Background color: # 003366; White color; Text align: center; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "loading-overlay" & gt; This is a loading screen & lt; / Div & gt; & Lt; P & gt; Page loaded! & Lt; / P & gt; & Lt ;! To slow down page load, the following is to see the effect - & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=10" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1232" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12341" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123459" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234568" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12345677" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567863" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567891" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890" & gt; & Lt; / Script & gt; & Lt; Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Function () {$ ("# load-overlay"). Hide ();}); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;
Comments
Post a Comment