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

Posted 2021-04-05

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

我目前正在使用以下html和CSS，如果视口大于900px，则正确阻止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;
    }
}

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

答案

您可以使用

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

另请注意，如果第一次加载时不满足媒体条件，则首先加载图片中的img标签，否则加载源图像，因此将img标签设置为空，然后在源标签中加载已加载图像的媒体你想要的屏幕小于900px。这是一个要检查的codepen。减小屏幕尺寸以查看效果。

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

希望这可以帮助。