使用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來解釋您的使用案例並幫助標準演進此主題。