如何将多个延迟加载占位符传递给图片元素？答案

【问题标题】：How to pass multiple lazyload placeholders to picture element?如何将多个延迟加载占位符传递给图片元素？
【发布时间】：2021-04-28 10:34:19
【问题描述】：

我们可以在源标签中将延迟加载到图片元素中。但是我们只有一个 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>

代码取自afarkas.github.io

假设第一个源标签中的图像宽度为 640 像素，高度为 900 像素，第二个源标签中的图像大小为 1200 像素宽度和 900 像素高度。在这里，我需要为便携式设备和台式机加载不同的低质量图像，但我只能设置一个 img 标签，因此它的 src 属性中只能设置一个图像占位符。我们可以做些什么来解决这个问题？

提前致谢，埃姆雷

【问题讨论】：

标签： html responsive-design lazy-loading responsive-images

【解决方案1】：

做到这一点的一种方法是使图片元素固有，然后通过 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。

【讨论】：