如果隐藏背景图像，它是否仍会加载？

Question

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

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

我需要的是图像（<img>或带有background-image的元素）仅在可见时才加载。我有点担心以某种方式优化我的网站的响应能力。

如果它是用javascript（或jQuery）完成的，如果它真的是轻量级的，那就太好了。谢谢！

Answer 1

引用

这篇文章：

隐藏元素的图像 [背景]，通过 CSS 设置或在 元素，每次都会加载，与我们的想法/预期相反。

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

所以你可以做的，是动态添加背景图像类，使用 javascript/jquery，只有当视口大于 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，因此您必须调整文档的大小才能看到它正常工作）

---

警告：这可能会导致图像加载"延迟"，因此请务必测试结果。

Answer 2

您还可以使用媒体查询来删除对较小设备上后台的调用。

因此，如果 DIV X 在桌面上加载 BG，您只需在最小-最大查询中将背景图像：无应用于移动 rez 的同一 DIV。对桌面执行相同的操作，但反向执行，以便加载更小或更大的图像。

因此，在响应式网站上，移动rez根本不加载图像，因为.class被告知背景图像：无。虽然同一个.class有背景图像：img.jpg以获得更高的rez。