JavaScriptは2つを発行することなく、画像のソースを変更する方法HTTPここ

Question

を要求するコードは次のとおり

<div id="wrapper"> 
    <img src="lowres/image123.jpg"> 
</div> 

PREMISSES： <img>要素は独自のシステムのバックエンドによって生成され、元の低解像度画像を使用します。私は純粋なjavascript（jqueryなし）を使って操作することしかできません。

私は変更外部サーバにある高解像度バージョンにデsrc属性、例えば：src="//cdn.provider.com/highres/image123.png"（イメージが同じ名前で異なる場所を持っている）する必要があります。

問題：DOMへの<img>挿入が2（2）HTTPリクエスト、HIGHRES用lowres画像の一方及び他方を発行した後にそれをやって - と私はたくさんのページ上の画像のを持っています！

<img>イベント「beforeInsertion」やイベントを遮断することにより、例えば、適切srcを変更するにはDOMにちょうどその挿入前に<img>を操作することが可能である場合FIX ITするために、私は「思っていましたアフターサービス "<div>のをラッピングします。

乾杯！

UPDATE 1：明確にするために：1）私はバックエンド/サーバー側へのアクセス権がありません。 2）私は低解像度の画像を表示したくない、高解像度だけを表示する。 3）私は事前にファイル名を知らないので、<img>から取得し、CDNに保存されている高解像度バージョンのパスに追加する必要があります（両方のイメージが同じ名前を持っています）。 4）私はコードを使ってそれを行うことができますが、TWO HTTPリクエストを犠牲にして、これは私が避けたいものであり、何がこの質問を動機づけていますか？ ;）

var img = document.getElementById("wrapper").childNodes[0]; 
img.src = getHighResolutionImagePath(img.src); 

Answer 1

あなたは、ドキュメントに（例えば、サーバサイドスクリプトを）<img>タグを追加する前に、URLを変更する必要があります。ブラウザは、タグを受け取るとすぐに、指定されたURLから画像を取得するので、それを置き換えることはできません。特にjsはウェブサイト上のすべての要素を取得した後に実行されます。

Answer 2

あなたは網膜ディスプレイ用のアプリを開発していると、ブラウザはそれが高解像度の画像を知っているようにしたい場合は、あなたがそうのように、画像名に「@ 2xの」を追加します：

背景-image：url（ '../ img/logo2@2x.png'）;

はそれを試してみて、ブラウザが同じポリシーを採用しているかどうかを確認します。

出典：http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Answer 3

あなたが変異イベントに耳を傾ける必要があり、あなたがイメージが（あなたが適切にフィルタを適用しなければならない追加されていることを検出したら、具体的DOMNodeInserted

完全なドキュメントがMDN > Mutation Events

でご利用いただけます画像タイプ）を使用して、目的のソースを置き換えることができます。

MDNから採取した小さな断片：

element.addEventListener("DOMNodeInserted", function (ev) { 
// ... 
}, false); 

は、その性能が大幅