Last Update - 27 Mar 2018

How to show placeholder image

How to show placeholder image

Whenever you load large image on the page and it's taken too much time, that time you can show loading image or you can say Placeholder image within the same image tag.

 

You can do this simply by using CSS. Use background property of css and set url of an loading image. According to me you should write no-repeat with it because if you not add this line then your image will repeat more than one times.

Now let's start with an example:

.image_placeholder{
  background: url('loading.gif') no-repeat;
  width:200px;
  height:200px;
}

 

Now, you can use this css class into yout img tag to show placeholder image until original image loading into img tag.

<img class="image_placeholder" />

 

Finally your HTML page will be like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Show Placeholder Loading Image</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  	.image_placeholder{
	 background: url('loading.gif') no-repeat;
	 width:200px;
	 height:200px;
	}
  </style>
</head>
<body>

<div class="container"> 
	<h2 class="text-danger">Show Placeholder Loading Image </h2>
     <div class="col-md-12 text-center">    
        <img class="image_placeholder" src="images/my_image.png" />
     </div>
</div>
</body>
</html>

Did you find this page helpful? X

Comments

Sankar

great post.
Always helpful