A web page load time depends on the page element. Therefore, it may be longer for a lot of images, JavaScript, and CSS. Sometimes well-designed pages grieve for page load time. So, there is a lot of ways to enhance your web pages to load faster. Therefore, displaying a loading image on page load is a great idea to maintain the user experience of your website.
With the help of using jQuery and CSS, you can easily display a loading icon until the page loads completely. Here we’ll offer you an easy way and short code snippets to show a loading image during page loading.
HTML
Add the following HTML after the <body> opening tag. Therefore, this loader div will display a loading image on page load.
<div class="loader"></div>
SEE ALSO: How to Generate QR Code with PHP using Google Chart API
CSS
You can use the following CSS to show a loading image on loader div, so make a position at the centre of the page and cover the entire screen with a transparent white background.
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}JavaScript
Initially, comprise the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
After doing that, add the following line of code to hide the loaded image while the page loads completely.
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>Also, ensure that you have placed the entire JavaScript code under the <head> tag.
Also, read our previous blog- How to Create Loader Animation with CSS
