How to Display Loading Image While Page Loads using jQuery
In this tutorial, we will discuss How to Display a Loading Image While the Page Loads using jQuery and CSS. For most clients, a web page’s load time to display loading images depends on the page elements and it may be longer for lots of images, CSS, and JavaScript. But many ways to optimize your web pages to load faster. Here, displaying a loading image on page load.
We are using jQuery and CSS, you can easily display a loading image and icon until the page loads completely. Here, we provide a simple and shortcode snippet to show a loading image while the page is loading.
Example
<!DOCTYPE html>
<html class="main_cls">
<head>
<meta charset='UTF-8'>
<title>How to Display Loading Image While Page Loads using jQuery</title>
<style>
#load_image{
width:100%;
height:100%;
position:fixed;
z-index:9999;
top: 60px;
background: url("cat-gif.gif") no-repeat center center #FFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'complete') {
document.getElementById('interactive');
document.getElementById('load_image').style.visibility="hidden";
}
}
</script>
</head>
<body>
<h1>How to Display Loading Image While Page Loads using jQuery</h1>
<div id="load_image"></div>
<img src="https://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg" width="100px">
</body>
</html>Output
