如果元素被隐藏，是否会加载内联背景图像样式的图像？

Question

我有背景图片，通过我的CMS上传为内容，因此必须以内联方式呈现：

<div class="image" style="background-image: user-upload.jpg"></div>

我不需要在较小的屏幕宽度下显示这些图像。我怎样才能确保图像不会被不必要地加载以保持页面大小？

这似乎是一个很好的资源，但它最好处理内联样式：

https://timkadlec.com/2012/04/media-query-asset-downloading-results/

@media (max-width: 600px {
    .image {
      display: none;
    }

    .image {
      background-image: none;
    }
}

Answer 1

理想情况下，您的背景图像声明不是内联样式 - 不确定在您的用例中是否可行。

但是如果你可以把它拿出去那么你可以离开你的.image类来处理它现在做的任何CSS然后使用jQuery添加或删除一个只能控制div的背景图像的附加类

var width = $(window).width();   
if (width <= 300 or whatever width you want) {                          
    $(".image").removeClass('yourclassforaBGimg');          
}
else {
    $(".image").addClass('yourclassforaBGimg'); 
}

如果在页面标题中运行，那么包含该图像的类将在浏览器开始呈现之前完全从页面中删除，并且根本不会加载它。