Preserve space for loading the image

[toplakd]

We all hate when page loads and it jumps when loading images, as space for image is not reserved.

So I did some research and found nice and easy working solution that makes just that. Preserve the space for the image, no matter if static size or responsive.

Credits to:

https://aspiringwebdev.com/stop-your-web-pages-from-jumping-around-while-images-load/

<style>
.image-container {
  position: relative;
/* ratio of image height to width W:200px, H:80px*/
/* example H/W*100   -   80/200*100=40% */ 
  padding-bottom: 40%;
  height: 0;
  overflow: hidden;
}
 
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>

<div class="image-container">
  <img src="image.jpg"/>
</div>

 

Edited February 20, 2019 by toplakd