Question

有一个类似的问题here，但我认为它适用于<img>代码。我不确定它是否与background-image相同。

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

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

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

Answer 1

引用this article：

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

但未加载unused css rules containing a background image。

所以你可以做的是，只有当视口大于X时，才能用javascript / jquery动态添加background-image类。

以下是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，因此您需要调整文档大小以使其正常工作）

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

Answer 2

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

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

因此，在响应式网站上，移动设备rez根本不会加载图像，因为.class已被告知background-image：none。虽然相同的.class有背景图像：img.jpg用于更高的rez。

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

2 个答案: