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

Question

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

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

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

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

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

谢谢！

---

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

Answer 1

您可以通过 XHR 获取图像并获取您想要的任何响应标头，如下所示。

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 问题，我在此示例中添加了代理，但您可以将其保留在代码中。