here 有一个类似的问题，但我认为这是针对<img> 标签的。我不太确定background-image 是否也一样。
我正在制作一个响应式网站，但我的问题是，如果通过手机访问（或者窗口宽度较小），我不希望加载图像。如果图像只是用display: none; 应用，如果使用@media，我认为如果图像在手机上显示，无论如何都加载会浪费时间和资源。
我需要的是图像（<img> 或带有background-image 的元素）仅在可见时才加载。我有点担心以某种方式优化我的网站的响应能力。
如果它是用 javascript（或 jQuery）完成的，如果它真的很轻量级就好了。谢谢！
【问题讨论】：
标签： javascript css
引用this article:
隐藏元素的图像 [背景]，通过 CSS 或内联设置 元素，每次都会加载，这与我们的想法/预期相反。
但unused css rules containing a background image 未加载。
所以你可以做的是动态添加背景图像类，使用 javascript/jquery，只有当视口大于 X 时。
这里是simple demo 的操作方法。
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，因此您必须调整文档的大小才能看到它的工作）
警告：这可能会导致图像“延迟”加载，因此请务必测试结果。
【讨论】：
head 上添加<style>，动态填充，而不是内联样式吗？
您还可以使用媒体查询在较小的设备上移除对后台的调用。
因此，如果 DIV X 在桌面上加载 BG，您只需将 background-image: none 应用于移动 rez 中的最小-最大查询中的相同 DIV。对桌面执行相同的操作，但相反，您可以加载更小或更大的图像。
因此，在响应式网站上，移动 rez 根本不会加载图像，因为 .class 已被告知 background-image: none。而相同的 .class 具有 background-image:img.jpg 以获得更高的分辨率。
【讨论】：