
Display Loading Image While Page Loads using jQuery and CSS
======================HTML======================
Add the following HTML after the <body> opening tag. This loader div will show a loading image on page load.
<div class="loader"></div>
======================CSS===========================
Utilize the accompanying CSS to show a stacking picture on loader div, make stacking picture position focus of the page, and spread the whole screen with a straightforward white foundation.
<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('https://cdn1.iconfinder.com/data/icons/social-signature/512/Linkedin_Color-128.png') 50% 50% no-repeat rgb(249,249,249); opacity: .8; } </style>
===========================JavaScript====================
Need to include the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Add the following line of code to hide the loading image while the page loads completely.
<script> jQuery(window).load(function($) { jQuery(".loader").fadeOut("slow"); }); </script>