Question

使用data<-c(78,100,90,100,96,100,100,82,95,99,100,97,79,99,100,77,79,100,95,100,100,100,82,77,82) hist(data, xlab="Score",breaks=c(75,80,85,90,95,100),ylab = "Frequency", main = paste("Score Distribution"), cex.main = 1.55, cex.lab = 1, freq = TRUE)元素，如果视口超过一定宽度，停止下载图像的最佳方法是什么？

我目前正在使用以下HTML和CSS，如果视口是＆gt;正确阻止<picture>被下载900px - ，但仅限于首次加载页面时！当视口大小调整到900px以下，然后再次调整大小超过900px时，会下载image.png。

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

HTML

transparent.png

CSS

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

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

Answer 1

您可以使用

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

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

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

希望这有帮助。

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

HTML

CSS

1 个答案: