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.
Are you want to get implementation help, or modify or enhance the functionality of this script? Click Here to Submit Service Request
If you have any questions about this script, submit it to our QA community - Ask Question
Excellent! Worked like a charm. Thanks!
Working perfectly fine
YEs its good tutorial
thankyou so much sir for helping