How to show Image placeholder in html : Best loading icon

How to show Image placeholder in html : Best loading icon

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 ( Html Image Placeholder ) 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.

Html Image Placeholder : For large size image loading on the html page you can show loading image or you can say Placeholder image within the same image tag. If you want to upload image on server without page reload then must read upload image without page reload.

Html Image Placeholder

Now let's start with an example:

.image_placeholder{
  background: url('loading.gif') no-repeat;
  background-position: center;
  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.

Loading...
<img class="image_placeholder" />

Output

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;
         background-position: center;
	 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>

Related posts

(1) Comments

  • User Pic

    great post.
    Always helpful

Write a comment