i have basic page structure:
<head> ... <link rel="stylesheet" type="text/css" href="template.css" media="screen" /> </head> <body> ... </body> the page background image set in template.css file:
body { ... background-image: url("../images/texture.jpg"); } when page loading, see background first, other content displayed. want show entire page @ once. this, i've added:
<style type="text/css"> body { visibility: hidden; } </style> to <head>...</head> section , then:
<body onload="document.body.style.visibility='visible'"> to body tag hoping entire body (with background) hidden , displayed @ once when entire page ready. not happen. still see background image before other content when refresh page.
what doing wrong?
thank you!
you hide whole page , "show" after dom-ready element fired up, farily easy piece of work :
<!doctype html> <html> <head> </head> <body> <style> body{ background: green; display: none; } </style> <div id="lotsandlotsofstuff">[...]</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $('document').ready(function(){ $('body').fadein(); }); </script> </body> </html> 
Comments
Post a Comment