Javascript 从加载的 img 中提取响应标头

Question

我有一个服务器端应用程序，它将在响应标头中返回图像以及一些 JSON 数据。

在客户端我有一个简单的 html 页面。想象一下，我按如下方式加载图像：

<img src="http://www.myserverapp.com/image1" />

在同一页面上，是否可以使用一些 javascript 来提取在加载页面时浏览器请求该图像时返回的响应标头？如果是这样 - 如何做到这一点？

另一种方法是将图像和 JSON 数据拆分为两个单独的资源，并让 javascript 分别向服务器发送请求以获取数据，但我在想是否可以将图像和 JSON 数据都作为一部分返回浏览器的图像请求可能会提高性能并使事情变得更加精简。

谢谢！

---

编辑：我不想使用 javascript 动态加载图像 - 我知道我可以这样做，然后以这种方式提取标题信息，但我正在寻找浏览器加载的解决方案图像正常，然后一些 javascript 代码追溯进入并找出浏览器发出的图像请求的响应标头。

Answer 1

您可以通过 XHR 获取图像并获取您想要的任何响应标头，like this。

var url = 'https://placehold.it/400x400';
var proxy = 'https://jsonp.afeld.me/?url=';
var client = new XMLHttpRequest();

client.open('GET', proxy + url, true);
client.send();
client.onreadystatechange = function() {
    if (this.readyState === this.HEADERS_RECEIVED) {
        console.log(client.getResponseHeader('Content-Type'));
    }
};

请注意，由于 CORS 问题，我在此示例中添加了一个代理，但您可以在代码中忽略它。