Stop page jumping while images load

问题:

I'm building a CSS grid layout in PHP/HTML5 for displaying mainly images with text and sometimes in combination with videos (not used in this example). One thing still annoys me is the page jumping while images are loading.

To avoid that the img tag should know either threw CSS or otherwise what the ratio is beforehand, most of the images used have a 1:1,414 ratio but there are exceptions so using just one ratio wouldn't work. Adding width and height on each img tag didn't work either.

I'm using a base64 transparent gif so it has something to load before the real image is downloaded. In the CSS each image has a placeholder color (grey) before so you can see that something is loading. Image width is set to 100% (what is good) and height is set to auto in CSS. Show here a small part of the HTMl+CSS coding for the grid and placing images:

.grid-container img {
  display: block;
  width: 100%;
  height: auto;
}

.grid-1,
.grid-2,
.grid-2-left,
.grid-3,
.grid-3-left,
.grid-3-thumb,
.grid-4,
.grid-4-left,
.grid-4-thumb {
  align-self: center;
  /* start | end | center | stretch */
  position: relative;
  /* for title-project placement */
  background-color: #ccc;
  /* placeholder */
}

.grid-2,
.grid-2-txt {
  grid-column: span 6;
}

<div class="grid-2">
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://i.imgur.com/eys1d9h.jpg" class="lazyload" alt="<?php echo $title; ?>">
</div>

回答1:

The way I do this is to use percentage based vertical padding with a few extra divs.

Basically, if I say padding-bottom: 20% on an element, it will have a bottom padding equal to 20% of the parent element width.

Assuming we know the width and height of an image in advance, we can use this to make a responsive holder for our image.

So, for example, we have an image that is 500px wide and 300px tall. ((300 / 500) * 100) = 60. With the above numbers we do the following:

1. Create a div with max-width: 500px (Or whatever width we want to display our images at)
2. Create a child div of the above div with padding: 0 0 60% set to position relative
3. Create a child div of the above that is position: absolute and top, left, right and bottom set to 0
4. Put the image inside the above, and set it to max-width: 100%

The result is a div that has the correct aspect ratio of your image at any size for your image to load into.

	.image-wrapper {
		background-color: #cccccc;
	}
	
	.image-wrapper > div {
		position: relative;
	}
	
	.image-wrapper > div > div {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.image-wrapper > div > div > img {
		max-width: 100%;
	}

	.image-wrapper > div > div:hover > img {
		display: none;
	}

	<div class="image-wrapper" style="max-width: 500px;">
		<div style="padding: 0 0 60%;">
			<div>
				<img src="https://www.willowsvetgroup.co.uk/wp-content/uploads/2017/08/Hyperthyroidism-in-cats-500x300.jpg">
			</div>
		</div>
	</div>