Display Preloading Image On Image Loading Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery HTML CSS | Written & Updated By - Riya

In this tutorial we will show you how to display preloading image on image loading using jQuery,whenever webpage opens it shows preloader image till image completely loads.

This method is widely used in many photos and ecommerce websites just to give a better user experiance.

You may also like Display Loading Image While Page Loads Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Display Preloading Image On Image Loading Using jQuery It Takes Only Three Steps:-

Make a HTML file and define markup
Make a js file and define scripting
Make a CSS file and define styling

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name preload.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="preload_script.js"></script>
<link rel="stylesheet" type="text/css" href="preload_style.css">
</head>
<body>

<div id="wrapper">
 <p class='image_wrapper'>
  <img src="images/image1.jpg" class='actual_image' id="actual_image1">
  <img src="images/loader1.gif" class='preloading_image' id="actual_image1-pre">
 </p>

 <p class='image_wrapper'>
  <img src="images/image2.jpg" class='actual_image' id="actual_image2">
  <img src="images/loader1.gif" class='preloading_image' id="actual_image2-pre">
 </p>
</div>

</body>
</html>

In this step we simply attach 2 images and a preloader image that display before image completely loads.

Step 2. Make a js file and define scripting

We make a js file and save it with a name preload_script.js

$(document).ready(function(){
 $('.actual_image').each(function(i, obj) {
  check_img(i);
 });
});

function check_img(ele_no)
{
 var img_id=$('.actual_image')[ele_no].id;
 if($('#'+img_id+'').on())
 {
  $('#'+img_id+'-pre').fadeOut();	
 }
 else
 {
   check_img(ele_no);
 }
}

In this step we use document.ready function to get all the images having class name 'actual_image' and then we create check_img() function to check whether image is completely loaded or not if not again we call this function, the function continously called till all the images load.

In this function we simply get images id to show and hide their respective preloading image we use fadeout jQuery effect you can use any effect. You may also like Display Progress Bar While Page Loads Using jQuery

Step 3. Make a CSS file and define styling

We make a CSS file and save it with a name preload_style.css

body
{
 background-color:#F2F2F2;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0px auto;
 padding:0px;
 width:700px;
}
.image_wrapper
{
 position:relative;
}
.image_wrapper .preloading_image
{
 position:absolute;
 left:0;
 right:0;
 margin-left:auto;
 margin-right:auto;
 margin-top:50px;
}

Thats all, this is how to display preloading image on image loading using jQuery. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on preload images jquery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪