Oh yay! You visited Old Pepper’s Blog
Good day to all.
The task is how to keep the visitor until the page is completely rendered.
The visitor can be impatient and easily leave if the page loads for a long time.
You need to get his attention and this will make the Preloader.
I suggest you ready-made code written in html + css + javascript without using libraries, very easy to install
For the preloader, you will need a .gif image. You can do it yourself or take one of these services:
Code:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Preloader</title>
<style>
#preloader{
display: none; /* Preloader is not visible */
}
#preload{ /* Visible block Image and background */
position: relative;
display: block;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #87D37C url(images/Gear.gif)center center no-repeat; /* Background color end .gif image */
background-size:60px; /* size .gif image */
}
.privet{ /* Greeting */
position: absolute;
top: 15%;
left: 25%;
right: 25%;
font-family: Monotype Corsiva;
font-size: 40px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="preloader">
<div id="preload">
<!--Greeting-->
<div class="privet">Oh yay! You visited Old Pepper's Blog</div>
</div>
</div>
<script>
var preloader = document.getElementById("preload");
function fadeOutnojquery(el){el.style.opacity = 1;
var interpreloader = setInterval(function(){
el.style.opacity = el.style.opacity - 0.05;
if (el.style.opacity <=0.05){
clearInterval(interpreloader);
preloader.style.display = "none";
}},15);
};
window.onload = function(){setTimeout(function(){fadeOutnojquery(preloader);
},2000); // Preloader ms working time
};
</script>
</body>
</html>As you can see the preloader is extremely simple.
This code can be placed on any individual page of the site, as here, and it will work without problems.
You can also enter footer.php into the file and the preloader will work on all pages.
