JavaScript：如何在不發出兩個HTTP請求的情況下更改圖像源

Question

這是代碼：

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

PREMISSES ： <img>元素由專有系統后端生成，並使用低分辨率圖像作為源。 我只能使用純javascript（沒有jquery！）來操作它。

我需要將de src屬性更改為位於外部服務器中的高分辨率版本，例如： src="//cdn.provider.com/highres/image123.png" （圖像具有相同的名稱但位置不同）。

問題 ：在<img>插入DOM后執行此操作會發出2（兩）個HTTP請求，一個用於低位圖像，另一個用於高位 - 我在頁面上有很多圖像！

為了修復它 ，我想知道是否有可能在插入DOM之前操作<img>來適當地改變src ，例如通過攔截<img>事件“beforeInsertion”或者事件“afterInsertion”之后的<div>包裝它。

干杯!

更新1 ：清楚地說明：1）我無法訪問后端/服務器端; 2）我不想顯示低分辨率圖像，只需要高分辨率; 3）我不提前知道文件名，我需要從<img>獲取它並將其附加到CDN中存儲的高分辨率版本的路徑（兩個圖像具有相同的名稱）; 4）我可以使用下面的代碼來完成它，但代價是兩個 HTTP請求，這是我想要避免的，這是什么激發了這個問題！ ;）

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

Answer 1

在將<img>標記添加到文檔之前（例如，在服務器端腳本中），您必須更改URL。 瀏覽器會在收到標記后立即從給定網址獲取圖像，因此無法替換它。 特別是js將在獲取網站上使用的所有元素后執行。

Answer 2

當您開發用於視網膜顯示的應用程序並且您想讓瀏覽器知道它是高分辨率圖像時，您會將“@ 2x”附加到圖片名稱，如下所示：

background-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);

請注意，性能會大大降低