使用srcset +尺寸抑制隐藏图像的下载

Question

我正在寻找一种解决方案，以使用srcset来抑制/限制在某些断点处隐藏图像的下载。我想避免使用背景图片和JavaScript。

知道如果这是一个合法的方法：

@media screen and (max-width: 768px) { 
 
    .container { 
 
    display: none; 
 
    } 
 
}

<div class="container"> 
 
    <img src="http://lorempixel.com/1200/1200" 
 
     srcset="http://lorempixel.com/1200/1200 1200w, http://lorempixel.com/1000/1000 1000w, http://lorempixel.com/800/800 800w, https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif 1w" 
 
     sizes="(max-width: 768px) 1px, 100vw, (min-width: 1920px) 50vw,"> 
 
</div>

的想法是，在视口≤768px（其中内含div是隐藏的），所述用户投放1px的透明gif而不是更重的图像。

Answer 1

使用这种方法，您仍然可以使浏览器下载1px gif。

不幸的是，目前没有办法真正阻止只有HTML的某些视口尺寸的下载。

您可以：

• 在srcset使用inline data-URI encoded 1px transparent GIF，而不是外部图像
• 使用CSS媒体查询隐藏容器，但要小心你怎么做：https://timkadlec.com/2012/04/media-query-asset-downloading-results/

您也可以通过join this discussion来解释您的使用案例并帮助标准演进此主题。