如果视口超过一定宽度，则停止图片元素下载图像答案

【问题标题】：Stop picture element downloading image if viewport over certain width如果视口超过一定宽度，则停止图片元素下载图像
【发布时间】：2018-07-11 22:30:08
【问题描述】：

使用<picture> 元素，如果视口超过一定宽度，停止下载图像的最佳方法是什么？

我目前正在使用以下 HTML 和 CSS，如果视口 > 900 像素，这可以正确防止下载 image.png - 但仅在页面首次加载时！调整到 900px 以下，然后再次调整到 900px 以上，transparent.png 被下载。

此外，在 IE9 上，transparent.png 在页面首次加载时被下载和在调整视口大小时。

HTML

<picture>
    <source type="image/png" srcset="image.png" media="(max-width: 900px)">
    <img srcset="transparent.png"><!-- 1px transparent PNG -->
</picture>

CSS

@media (min-width: 900px) {
    picture {
        display: none;
    }
}

理想情况下，无论如何我都不希望下载任何超过 900 像素的内容。这可能吗？

【问题讨论】：

标签： css image download responsive

【解决方案1】：

你可以使用

srcset="data:" OR srcset="about:blank"

另外请注意图片中的img标签如果在第一次加载时不满足媒体条件则先加载否则加载源图像，所以将img标签设置为空，然后在源标签中与您拥有的媒体当屏幕小于 900px 时加载你想要的图像。这是一个要检查的代码笔。缩小屏幕尺寸看看效果。

https://codepen.io/Nasir_T/pen/rJOwzq

希望这会有所帮助。

【讨论】：