Menu
I am trying to something simple -- make a jQuery script that will wait to show the entire page, including all DIVs, text, and images. While the page is loading, instead of showing parts of the page I would like to show a spinning GIF image, and when the entire page is loaded we can fade the contents of the page in the browser window.
There are plenty of scripts to load with an ajax request into a container DIV -- but this is different. This will show a spinning GIF while an HTML page is loading. Any help is appreciated
This type of script only works on ajax requests
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
959
$(document).ready(...) fires as soon the DOM is loaded. This is too soon. You should use $(window).on('load', ...):
JavaScript:
$(window).on('load', function(){
$('#cover').fadeOut(1000);
})
CSS:
#cover {
background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
HTML:
<div id="cover"></div>
<!-- rest of the page... -->
look at this jsFiddle: http://jsfiddle.net/gK9wH/9/
95
I would cover the entire page with an overlay, and then remove the overlay once the page loads. You can tweak this to also show a loading.gif if you'd like. Here's an example:
HTML
<body>
<div id="container">
<h2>Header</h2>
<p>Page content goes here.</p>
<br />
<button id="remove_overlay">Remove Overlay</button>
</div>
</body>
CSS
#container{padding:20px;}
h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:2305px !important; /*change to YOUR page height*/
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}
jQuery:
$(document).ready(function () {
// Set a variable that is set to the div containing the overlay (created on page load)
var page_overlay = jQuery('<div id="overlay"> </div>');
// Function to Add the overlay to the page
function showOverlay(){
page_overlay.appendTo(document.body);
}
// Function to Remove the overlay from the page
function hideOverlay(){
page_overlay.remove();
}
// Show the overlay.
$(showOverlay);
});
});
$(document).ready(function () {
$(hideOverlay);
});
You'll need to tweak this so that it loads the overlay as soon as the page is requested (tweak the $(showOverlay); call so that it fires before document is ready.
Here's a simple working fiddle with a button to remove the overlay. You should be able to go from there :) http://jsfiddle.net/3quN5/
20
I think the best way would be to have a 'cover' div which will cover the whole page whilst it loads. It would be opaque, and would contain your GIF.
The following would then hide the div once the page has loaded:
$(document).ready(function() {
// Hide the 'cover' div
});
The following would make the div the size of the page:
.div{
height:100%;
width:100%;
overflow:hidden;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
