ロードされたimgからのJavascript抽出応答ヘッダー

Question

私は、レスポンスヘッダー内のいくつかのJSONデータと共にイメージを返すサーバー側のアプリケーションを持っています。

クライアント側では、単純なhtmlページがあります。次のように私はイメージをロード想像：同じページで

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

を、ページのロード中にブラウザがそのイメージを要求したときに返された応答ヘッダを抽出するために、いくつかのJavaScriptを使用することが可能でしょうか？もしそうなら、どうしたらいい？

代わりに、画像とJSONデータを2つの別々のリソースに分割して、javascriptでデータを別々にリクエストするようにしていますが、画像とJSONの両方のデータがブラウザの画像リクエストの一部であり、パフォーマンスの向上につながり、より合理的なものにすることができます。

ありがとうございます！

---

EDIT：私は動的に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の問題のために、この例では、プロキシを追加しましたが、あなたはあなたのコードにこれを残すことができます。