0

我现在已经多次遇到这个问题，并且总是使用 CSS 和 JS 的组合来解决它，但是随着对响应式图像的支持越来越多，我一直在寻找一个更有说服力的解决方案。我只是试图不在移动设备上加载图像，同时保留语义（所以没有 CSS background-image），利用浏览器预加载（所以没有 JS 延迟加载）。

我怎样才能做到这一点？

4

1 回答 1

0

tl;博士

将srcset属性与具有 URLabout:blank和宽度描述符的图像候选字符串一起使用1w，并将sizes属性的后备设置<source-size-value>为0vw。然后，添加 CSS 规则以隐藏较小视口的图像。最后，将它包装在一个<picture>with <source>s 中以获得绝对控制。

srcset

在我看来，这可以使用响应式图像和一些 CSS 来解决。

考虑以下响应式图像：

<img
    src="foo-585.png"
    alt="foo"
    srcset="foo-375.png 375w, foo-585.png 585w"
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px"
>

尽管,中没有后备<source-size-value>，仍然加载。所以看起来我们需要找到一个不发送任何额外 HTTP 请求的图像候选字符串。sizesfoo-375.png

我搜索了有关如何从本质上设置空图像候选字符串的提示。我找到了几种方法，所有这些方法都可以像这样实现：

<img
    src="foo-585.png"
    alt="foo"
    srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w"
    sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw"
>

请注意，添加了一个具有宽度描述符1w和后备<source-size-value>的新图像候选字符串0vw。在此示例中，[URL]是以下描述的 URL 之一的占位符：

空片段

一个答案建议使用空片段 ( #) 作为有效选项。不幸的是，我的测试表明此方法重复向当前 URL 发送 HTTP 请求。不好。

小数据网址

另一个答案建议在 Base64 编码的数据 URL 中使用The Tiniest GIF Ever ：

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

最初，我认为 58 字节的 gzip 压缩机会很少，因此将 GIF 保存为具有较短 URL 的外部资源可能比多个数据 URL 更有效，但我错了；gzip 在早餐时吃掉了这个数据 URL 的多个实例。

但是，正如一条评论指出的那样，移动设备上的数据 URL 速度很慢。

无方案，无主机，端口0

另一个答案建议使用没有方案、没有主机和端口0( //:0) 的 URL。这似乎可行，但有人担心防火墙警告。还需要 CSS 来隐藏损坏的图像样式。

about:blank

同一位评论者建议使用about:blank，这实际上似乎工作得很好，但就像最后一种方法一样，确实需要 CSS 来隐藏损坏的图像样式：

img {
    display: none;
}

@media (min-width: 768px) {
    img {
        display: inline-block;
    }
}

对我来说，这似乎是最好的选择，因为它有效、高效，并且不会显示任何面向用户的警告。这几行 CSS 对我来说似乎很有价值。

<picture>

正如评论所指出的，srcset不能保证。如果浏览器出于某种原因决定反对您的about:blank图像候选，那么解决方案就会崩溃。为了解决这个问题，包装你的<img>in<picture>元素并添加相关<source>的 s：

<picture>
    <source
        media="(min-width: 768px)"
        srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w"
    >
    <source srcset="about:blank">
    <img
        src="foo-585.png"
        alt="foo"
        srcset="[URL] 1w foo-375.png 375w, foo-585.png 585w"
        sizes="(min-width: 1200px) 585px, (min-width: 768px) 375px, 0vw"
    >
</picture>
于 2016-04-25T14:05:17.047 回答