使用srcset + sizes

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解释您的使用案例，并帮助标准在此主题上发展。