微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

加载前如何在前端使用javascript获取外部图像的文件大小

如何解决加载前如何在前端使用javascript获取外部图像的文件大小

假设我在外部托管了一个图像,比如在 imgur 上,然后在我的 html 网站上我可以拥有:
<img src="https://i.imgur.com/hDEXSt7.jpg">
显示了图像。即使图像是在外部托管的,这样做也不违反 CORS。

现在,在加载/显示该图像之前,我想先检查它的文件大小

在后端,我可以通过对 URL 的 HEAD 请求执行此操作。但是,如果我尝试从 FE 发送 AJAX HEAD 请求,它会因 CORS 违规而被阻止。这是有道理的,我知道您通常无法向外部站点发出 AJAX 请求,这是有充分理由的。

但是使用 JS 我可以生成用于显示图像的 HTML 并将其插入到页面中,这样它然后必须调用外部网站以获取图像数据,这似乎非常愚蠢,但我不能只是问有多少数据。肯定有办法。

这个: https://stackoverflow.com/questions/6575159/get-image-dimensions-with-javascript-before-image-has-fully-loaded\ 非常接近我想要的,但它是针对图像的尺寸。我想要文件大小。 <img> 元素似乎没有这个属性。此外,这似乎是一个奇怪的技巧,您可以在其中开始加载图像并在完成之前获取其信息。理想情况下,我希望在开始加载之前 获取文件大小信息,以便我可以使用它来决定是否加载图像。

我可以通过从我自己的后端发出 HEAD 请求来做到这一点,但我宁愿不这样做。我想要的信息甚至不在我的后端。考虑到 CORS 不会阻止我实际继续加载整个图像,这只是为了绕过 CORS 限制而调用我的服务器的愚蠢浪费。

有什么想法吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。