3

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

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

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

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

4

2 回答 2

5

引用这篇文章：

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

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

所以你可以做的是，只有在视口大于 X 的情况下，才使用 javascript/jquery 动态添加背景图像类。

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

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，所以你必须调整文档的大小才能看到它的工作）

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

于 2012-10-05T17:09:48.413 回答
4

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

因此，如果 DIV X 在桌面上加载 BG，您只需将 background-image: none 应用到相同的 DIV 以在最小-最大查询中移动 rez。对桌面执行相同的操作，但相反，以便加载更小或更大的图像。

因此，在响应式站点上，移动 rez 根本不加载图像，因为 .class 已被告知背景图像：无。虽然相同的 .class 具有 background-image:img.jpg 以获得更高的 rez。

于 2014-01-15T19:09:03.513 回答