How do I show a loading image before actual body load?
Question
I want to hide the body of my web page. Once the all content of the body tag of the web page are ready to display I want to show it body, but until that time I want to show some loading image.
If for some reason the content of the body does not load properly I want to show an error message.
What is the best way of doing this in javascript?
1 answers
solution1
4 2009-12-07 10:21:00
It's pretty simple actually. You'll have to position a full screen div over your page and hide it once the onload function is triggered.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#loading-overlay {
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: #003366;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="loading-overlay">This is a loading screen</div>
<p>The page has loaded!</p>
<!-- The following is to slow down the page load so that the effect can be observed -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=10"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1232"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12341"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=123459"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234568"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=12345677"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567863"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567891"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jsx=1234567890"></script>
<script type="text/javascript">
$(function() {
$("#loading-overlay").hide();
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.