Preloader JavaScript
Question
I'm trying to make a preloader, I currently have this code, but it's not showing the preloader before the page loads.
$(document).ready(function(){
$(".preloader-wrapper").show();
$("body").hide();
});
$(window).load(function(){
$(".preloader-wrapper").fadeOut("slow", function(){
$("body").fadeIn("slow");
});
});
EDIT: Got it.
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
$(this).remove();
});
}, 2000);
#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}
4 answers
solution1
1 2016-05-10 18:48:26
问题之一是您隐藏了整个主体，其中可能包括.preloader-wrapper
solution2
1 2016-05-10 18:49:38
You can have it loaded first and on top. Then just remove it after the dom is loaded.
setTimeout(function() { $('#preloader').fadeOut('slow', function() { $(this).remove(); }); }, 2000);
#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="preloader"></div> <h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
solution3
0 2016-05-10 18:46:38
You should set the .preloader-wrapper to be visible as default - use css for this.
Example:
.preloader-wrapper {
display: block;
}
Also, you shouldn't place something outside the <body> tag, so this means you shouldn't hide body using JS.
Remove:
$(document).ready(function(){
$(".preloader-wrapper").show();
$("body").hide();
});
Change the second piece of your code to:
$(window).load(function(){
$(".preloader-wrapper").fadeOut("slow");
});
solution4
0 2020-06-07 20:51:44
Try this simple Preloader with css and javascript. no need to add any library. Sample Blog : https://www.kingsubash.com/simple-page-preloader-with-css-and-javascript
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
.preloader{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: #fff;z-index: 9999;text-align: center;}.preloader-icon{position: relative;top: 45%;width: 100px;border-radius: 50%;}
<div class="preloader"> <img class="preloader-icon" src="/PATH-TO-IMAGE" alt="My Site Preloader"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.