使用<picture>
元素,如果视口超过一定宽度,停止图像下载的最佳方法是什么?
我目前正在使用以下HTML和CSS,如果视口大于900px,则正确阻止image.png
下载 - 但仅限于首次加载页面时!视口大小调整到900px以下,然后再调整大小超过900px,下载transparent.png
。
此外,在IE9上,transparent.png
会在首次加载页面和调整视口大小时下载。
<picture>
<source type="image/png" srcset="image.png" media="(max-width: 900px)">
<img srcset="transparent.png"><!-- 1px transparent PNG -->
</picture>
@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
希望这可以帮助。