加载图像时停止页面跳转 [英] Stop page jumping while images load

问题描述

我正在PHP/HTML5中构建CSS网格布局，主要显示带有文本的图像，有时还显示视频(在此示例中未使用).令我烦恼的一件事是图像加载时页面跳动.

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.

为避免img标签应事先知道抛出CSS或其他比例，所使用的大多数图像的比例为1:1414，但是有一些例外，因此仅使用一种比例是行不通的.在每个img标签上添加宽度和高度也不起作用.

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.

我使用的是base64透明gif，因此在下载实际图像之前需要加载一些内容.在CSS中，每个图像之前都有一个占位符颜色(灰色)，因此您可以看到正在加载某些内容.在CSS中，图像宽度设置为100％(很好)，高度设置为自动.在此处显示用于网格并放置图像的HTMl + CSS编码的一小部分:

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>

推荐答案

我这样做的方法是使用基于百分比的垂直填充以及一些额外的div.

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

基本上，如果我在元素上说padding-bottom: 20%，则其底部填充将等于父元素宽度的20％.

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.

例如，我们的图像宽为500px，高为300px. ((300 / 500) * 100) = 60.根据上述数字，我们可以执行以下操作:

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. 使用max-width: 500px(或我们要在其中显示图像的宽度)创建div
2. 在padding: 0 0 60%设置为相对位置的情况下，创建上述div的子div
3. 创建上面的子div，将其设为position: absolute，并将上，左，右和下限设置为0
4. 将图像放在上面，并将其设置为max-width: 100%

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%

结果是一个div，该div的图像纵横比正确，可以加载任何尺寸的图像.

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>

这篇关于加载图像时停止页面跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！