Some of my friends asked me about how to do the loading page trick on this blog which hide the page content until all the elements loaded. Actually, this trick is using a very simple idea to hide all the elements until the javascript onload event triggered. While all the elements except the body itself hidden, we use gif animated image as a background image on the body tag. We need to hide the first element after body tag, inspect the structure of our site itself, for example :
<head>
blah blah…
</head>
<body>
-
<div id="page">
<div></div>
blah blah…
<div></div>
</div>
</body>
on the source code above, first thing we have to do is inserting css code inside the head tag to add gif animated loading image on the body tag, then hide the div with id="page", so all the whole content will be hidden, then add additional script at the document onload event to show the "page" div then change the body background image with the real background. ok, let’s do it, here’s the css and javascript to do that simple trick. Kindly add this code inside your head tag :
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
http://www.blogger.com/img/blank.gif </script>
Pretty simple isn’t it? you can change this part :
css("body","background:#000 url()");
with your own color or background image url. customize the script, adjust with your own site structure, the id name might not be "page" it could be "content" or else. Hope this idea could help you to create another useful trick for web development 
Happy tweaking 
Sumber : crazydavinci
0 comments:
Post a Comment