javascript - 添加动态响应式背景图片的最佳方式是什么？

Question

向静态站点添加(响应式)背景图像的最佳方式是什么？另一个要求(描述为“动态”)是图像由后端设置，因此不能直接写入 CSS 文件。

选项 A:

通过 style 属性在模板中注入(inject)背景图像。

优点:浏览器的 Preparser 可以获取它。
Contra:它直接添加样式并硬编码到不理想的标记中。我也不知道如何在不向 style 属性中添加 super 复杂的媒体查询的情况下实现响应式图像解决方案。

选项 B:

在模板中注入(inject)响应式背景图像源作为数据属性，并通过 JavaScript 将最佳假设写入 style 属性。

优点:响应式图像是可以实现的。内联样式仅通过脚本写入标记。
Contra:当 JavaScript 失败时失败。预解析器无法提前获取它。因此增加了在显示图像之前出现闪光的可能性。

选项 C:

使用内容响应图像。优点:简单易行。反对:这不是我想做的，而且在语义上不正确，因为图像显然只是代表性的，应该存在于 CSS 而不是 HTML 中。

---

您有更好的主意或知道什么是最佳选择吗？感谢您提供任何额外的见解或想法!

Answer 1

我不喜欢听 Javascript 中的媒体查询，只要它可以用 css 处理。

AFAIK css 背景图像将不会被加载，如果它们被 display:none; 隐藏。这就是为什么我通常为不同的媒体查询添加一个包含多个元素的容器，这些元素具有不同的背景图像。选择要显示的那个可以完全在 css 中处理。

<div class="images" role="presentation" aria-hidden="true">
   <span class="images__image images__image--phone" style="background-image: url(foo/bar/phone.jpg);"></span>
   <span class="images__image images__image--tablet" style="background-image: url(foo/bar/tablet.jpg);"></span>
   <span class="images__image images__image--desktop" style="background-image: url(foo/bar/desktop.jpg);"></span>
</div>

我还使用了我这边的组件，这些组件使用 javascript 更改了 img 元素的源，但这不是背景图像的理想解决方案。

编辑:太糟糕了，attr() 只能用于content。在这里会很有帮助:(

更新:

display: none; 当然是不够的。您必须使用 background-image: none !important 覆盖不匹配查询的 background-image url。

有关简短演示，请参阅此 fiddle :http://jsbin.com/wemunupumu/