如何传递多个lazyload占位符到图片元素？

Question

我们可以在源标签中实现lazyload到图片元素中。但是我们只有一个img标签，我们可以在这个img标签的src属性中加载lazyload占位符映像。因此，如果我想为每个懒加载的图像设置单独的懒加载占位符，有没有办法实现它？我需要这个，因为我想为便携式设备和桌面设置不同的相框。比方说，一张图像对于便携式设备具有较高的高度值（如果视口小于1200px，将被加载），另一张图像对于桌面视口具有较高的宽度值（1200px或以上）。Ex：

<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

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

提前谢谢你，埃姆雷

Answer 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;
}

然后将media查询添加到设置不同填充底部的。