Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Display Preloading Image On Image Loading Using jQuery

Monday, Jan 9, 2017

Tags:- jQuery HTML CSS


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


See Demo
Preloading Image On Image Loading


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

  1. Make a HTML file and define markup
  2. Make a js file and define scripting
  3. 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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email