How to show placeholder image

Show loading image until the original image loading

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>
Sankar made a post.
385 day ago

great post. Always helpful

Top