问题描述
我们可以在源标签内的图片元素中实现延迟加载。但是我们只有一个 img 标签,我们可以在这个 img 标签的 src 属性中加载延迟加载占位符图像。因此,如果我想为每个延迟加载的图像设置单独的延迟加载占位符,有没有办法实现它?我需要这个是因为我想为便携式设备和台式机设置不同的相框。假设一个图像具有较高的便携式设备高度值(如果视口小于 1200 像素,则会加载),而另一幅图像具有较高的桌面视口宽度值(1200 像素或更高)。 例如:
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source
data-srcset="640.jpg 640w,990.jpg 990w,1024.jpg 1024w"
media="(max-width: 1024px)" />
<source
data-srcset="1200.jpg 1200w" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="1024.jpg"
class="lazyload"
alt="image with artdirection" />
</picture>
假设第一个源标签中的图像宽度为 640 像素,高度为 900 像素,而第二个源标签中的图像的宽度为 1200 像素,高度为 900 像素。在这里,我需要为便携式设备和台式机加载不同的低质量图像,但我只能设置一个 img 标签,因此它的 src 属性中只能设置一个图像占位符。我们可以做些什么来解决这个问题?
提前致谢, 埃姆雷
解决方法
一种方法是使图片元素成为固有的,然后通过 CSS 和媒体查询控制图片元素。
像这样:
picture.intrinsic {
display: block;
position: relative;
height: 0;
width: 100%;
padding-bottom: 100%; // Default to square
}
picture.intrinsic img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
然后将媒体查询添加到 .intrinsic 以设置不同的填充底部。