时间戳

首页 > 解决方案 > 如何将多个延迟加载占位符传递给图片元素？

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

问题描述

我们可以在源标签中实现延迟加载到图片元素中。但是我们只有一个 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 属性中只能设置一个图像占位符。我们能做些什么来解决这个问题？

提前致谢， 埃姆雷

标签： htmlresponsive-designlazy-loadingresponsive-images

解决方案

一种方法是使图片元素成为内在元素，然后通过 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 以设置不同的填充底部。

推荐阅读