How do I display a loader when the page loads and hide it when it is loaded?
$(document).ready(function() {
$('.windowLoader').show().fadeOut(2000);
});
Displays the loader long after the page start loading and sometime the 2000 ms duration of the fadeOut event completed before the page has loaded.
Is there anyway to executed the display of the loader as soon as the DOM is ready and remain it visible until the page is loaded (not the images) and then hide the loader?
Why not put the loader directly in the document and then on ready remove it using jQuery? E.G.
<div id="loading"></div>
$(document).ready(function() {
$("#loading").fadeOut(function() {
$(this).remove(); // Optional if it's going to only be used once.
});
});
Else, if you're doing other things within your $(document).ready() then .fadeIn() (/show/create) your loading bar at the top of the method, do your extensive code, and then at the bottom call the .fadeOut()
As kindly suggested if you're worried about people without JavaScript viewing the loading bar then also add the following:
<noscript>
<style> #loading { display:none; } </style>
</noscript>
it should help customize it according to your code
$(document).ready(function () {
// calculate height
var screen_ht = jQuery(window).height();
var preloader_ht = 5;
var padding = (screen_ht / 5) - preloader_ht;
jQuery("#preloader").css("padding-top", padding + "px");
// loading animation using script
function anim() {
jQuery("#preloader_image").animate({ left: '1px' }, 2000,
function () {
jQuery("#preloader_image"), animate({ left: '1px' }, 2000);
}
);
}
//anim();
});
function hide_preloader() {
// To apply Fade Out Effect to the Preloader
jQuery("#preloader").fadeOut(1000);
}
</script>
<style>
#preloader {background: #1c1c1c;position:fixed;left:0px; top:0px; width:100%; height:100%; text-align:center;color:#fff;z-index: 100000000;}
#preloader div {width:228px;height:240px;margin:auto;padding:10px 0;text-align:center;overflow:hidden;}
#preloader_image {width:228px;height:240px;position: relative;left:0px;top:-10px;}
</style>
</head>
<body id="home" onload="hide_preloader()">
<div id="preloader">
<div>
<div id="preloader_image">
<img src="loading.gif" style="position: absolute;bottom: 0;left: 35%;">
</div>
</div>
</div>
</body>
来源：https://stackoverflow.com/questions/18379677/display-a-loader-when-the-page-loads