close
A web page load time depends on the page elements and it may be longer for lots of images, JavaScript, and CSS. Sometimes well-designed pages suffer for page load time. There are many ways to optimize your web pages to load faster. However, displaying a loading image on page load is a great idea to maintain the user experience of your website.
Using jQuery and CSS, you can easily display a loading icon until the page loads completely. Here we’ll provide a simple way and short code snippets to show a loading image while page loading.
Add the following HTML after the <body> opening tag. This loader div will show a loading image on page load.
<div class="loader"></div>
Use the following CSS to display a loading image on loader div, make loading image position center 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; }
At first include the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Now add the following line of code to hide the loading image while the page loads completely.
<script type="text/javascript"> $(window).load(function() { $(".loader").fadeOut("slow"); }); </script>
Also, ensure that the entire JavaScript code has been placed under the <head> tag.
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Excellent! Worked like a charm. Thanks!
Working perfectly fine
YEs its good tutorial
thankyou so much sir for helping