As I work on creating a WordPress template, I am trying to incorporate an image display during the page loading process. However, I want this loading period to last a minimum of 3 seconds. Is there a way to specify a function execution time? Currently, I am using `$ ( window ) .load ()` to add a class to a div within the page for display. The current setup works fine, but I specifically need the loading image to be visible for at least 3 seconds before removing the added class after the window load event. Below is my code:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<div class="loader">
loading image
</div>
<div class="content">
main content
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script><!-- jQuery -->
</body>
</html>
This is my CSS:
.loader{
position: fixed;
top: 0;
bottom:0;
right: 0;
left: 0;
background-color: blue;
z-index: 999;
display: none;
}
.show-loader{
display: block;
}
.content{
background-color: red;
height: 600px;
}
This is the JQuery section:
jQuery(document).ready(function($) {
$(window).load(function() {
$('.loader').addClass('show-loader');
});
$('.loader').removeClass('show-loader');
});