Pre-loading specific content with JavaScript
Here is a great little script to preload specific divides with jQuery or just JavaScript:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function preloader(){
document.getElementById("preloader").style.display = "none";
document.getElementById("wrapper").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style type="text/css">
<!--
div[id="wrapper"]{
display: none;
}
div[id="preloader"]{
padding-left:30px;
z-index:1000;
width: 232px; height: 38px;
background: url(http://www.sydpixel.com/images/loading.gif) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
body {
background-color: #000033;
}
body,td,th {
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="preloader">Loading… Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
<iframe src ="http://www.msn.com" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<!-- /page contents goes here -->
</div>
</body>
With jQuery:
<script type="text/javascript">
//use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader")[0].css("display","none");
$("#container")[0].css("display","block");
});
</script>
Posted by Admin on 06/21 at 02:42 PM
