首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如果视口超过一定宽度,停止图片元素下载图像

如果视口超过一定宽度,停止图片元素下载图像
EN

Stack Overflow用户
提问于 2018-02-01 06:45:05
回答 1查看 452关注 0票数 0

使用<picture>元素,在视口超过一定宽度时,停止下载图像的最佳方法是什么?

我目前使用的是下面的HTML和CSS,如果视图端口>900‘m,但是只有在第一次加载页面时才能正确地阻止下载!当视窗大小调整到900’m以下,然后再调整大小超过900‘m时,transparent.png才会被下载。

此外,在IE9上,当页面第一次加载和视图端口调整大小时,transparent.png会被下载。

HTML

代码语言:javascript
运行
AI代码解释
复制
<picture>
    <source type="image/png" srcset="image.png" media="(max-width: 900px)">
    <img srcset="transparent.png"><!-- 1px transparent PNG -->
</picture>

CSS

代码语言:javascript
运行
AI代码解释
复制
@media (min-width: 900px) {
    picture {
        display: none;
    }
}

理想情况下,无论什么情况,我都不希望任何东西被下载到900 no以上。这个是可能的吗?

EN

回答 1

Stack Overflow用户

发布于 2018-02-01 07:03:40

您可以使用

代码语言:javascript
运行
AI代码解释
复制
srcset="data:" OR srcset="about:blank"

还请注意,如果在第一次加载时未满足媒体条件,则首先加载图片中的img标记,否则将加载源映像,因此将img标记设置为空,然后在源标记中,在屏幕小于900 to时加载所需的图像。这是一个要退房的代码库。缩小屏幕大小以查看效果。

T/pen/rJOwzq

希望这能有所帮助。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48565451

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文