A load time on a web page depends on the elements of the website, so lots of images, JavaScript, and CSS may be longer. Well-designed pages often suffer as a result of page load time. There are many ways to automate the faster loading of your web pages. Displaying a loading picture on page load, however, is a good idea to keep the website's user experience.
Using jQuery and CSS, a loading icon can be conveniently shown until the page is fully loaded. Here we will provide a quick way to display a loading image when loading the page and short code snippets.
Upon opening the < body > file, add the following HTML. On page load, this loader div will display a loading image.
<div class="loader"></div>
Use the following CSS to display a loading image on the loader div, render the page center of the loading image location, and cover the entire screen with a clear 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 next line of code to cover the loading image when loading the entire page.
<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.
© Themesgiant.com All rights reserved| 2011-2020