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

Question

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

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

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

如果它是用javascript(或jQuery)完成的,那么它真的很轻巧.谢谢!

Answer 1

引用这篇文章:

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

但含有的背景图像的未使用CSS规则不加载.

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

这是一个如何做的简单演示.

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,因此您需要调整文档大小才能看到它正常工作)

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