如果背景图片被隐藏，它仍然会加载吗？

Question

这里有一个类似的问题，但我认为它是针对<img>标签的。我不确定对于background-image是否相同。

我正在制作响应式网站，我的问题是，如果通过手机访问网站（或者窗口宽度很小），我不希望图片加载。如果使用@media只是将图像应用于display: none;，我认为仍然会浪费时间和资源，因为无论它是否显示在移动设备上，图片都会被加载。

我需要的是仅在图像可见时才加载图像（<img>或具有background-image的元素）。我有点担心如何优化站点的响应能力。

如果使用JavaScript（或jQuery）完成，最好轻量级。谢谢！

- ton

---

显然，Opera是唯一一个无法为隐藏元素加载背景图像的浏览器。 - Harsha Venkataramu

Answer 1

引用这篇文章：

通过CSS或inline设置的隐藏元素的图像[背景]将每次加载，与我们所想象/期望的相反。

但是包含背景图像的未使用的CSS规则不会被加载。

因此，您可以通过javascript/jquery动态添加background-image类，仅当视口大于X时。

---

这里是一个简单的演示如何做到这一点。

HTML

<div id="yourdiv"></div>

CSS

#yourdiv {
    background:yellow;
}
#yourdiv.backgrounded {
  background:url(your-image.jpg) top left no-repeat;
}​

jQuery

$(window).on('load resize',function(){
    var w=window,
        d=document,
        e=d.documentElement,
        g=d.getElementsByTagName('body')[0];
    var docWidth = w.innerWidth||e.clientWidth||g.clientWidth;
    if(docWidth>600){ /* replace 600 with the screen width you want to target */
      yourdiv.addClass('backgrounded');
    }
});​

(jsFiddle不会触发load事件，所以您必须调整文档大小才能看到它工作)

---

警告：这可能会导致图像“延迟”加载，所以请务必测试结果。

- Giona

---

目前，图像的URL是从数据库中检索的，因此它被添加为内联。那么我该如何动态添加呢？ - ton

@skii 抱歉，我正在编写一个演示。那么，你不能动态地添加一个 <style> 到文档的 head 中，而不是使用内联样式吗？ - Giona

是的，我可以做到。我已经考虑了如何在我的Wordpress主题中应用它。非常感谢你，看到图片我笑了。 - ton

Answer 2

您也可以使用媒体查询在较小的设备上删除背景调用。因此，如果 DIV X 在桌面上加载 BG，则只需在最小-max 查询中将 background-image: none 应用于同一 DIV 的移动 rez。 对于桌面端，请反向执行相同操作，以便加载更小或更大的图像。因此，在响应式站点上，移动 rez 不会加载任何图像，因为已告知 .class 背景图像：none。而相同的 .class 具有更高 rez 的 background-image：img.jpg。

- Buretta

---

这是一个很好的建议。我现在会采用这个方案，而不是JS解决方案。谢谢！ :) - ton

这并不一定是正确的。有些浏览器仍会下载隐藏的背景图片，具体取决于标记结构http://timkadlec.com/2012/04/media-query-asset-downloading-results/。 - mark