How To Display Loading Image On Page Load Jquery CSS

0 Sales

Free

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.

HTML

Upon opening the < body > file, add the following HTML. On page load, this loader div will display a loading image.

<div class="loader"></div>

CSS

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;

}

JavaScript

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.