如何加載 <img> 將SRC標記為一個javascript變量，以便在多個圖像中重復使用？

Question

所以這是我的快速網頁下載計划...

我能預見的唯一問題是base64編碼圖像源的重復。

我可以使用jQuery輕松提取圖像源，然后將其重新插入到我的所有空白圖像（需要創建精靈的圖像）中嗎？

編輯：有些人提到base64圖像沒有緩存，但如果我告訴它，我的整個網頁（包含base64圖像）不會被緩存嗎？

Answer 1

這是CSS圖標/可重用圖像的常用技術。

您可以使用$(element).attr('src');獲取圖像src $(element).attr('src'); 。

但是，我沒有看到將圖像二進制編碼（我假設您的意思是圖像文件本身）編碼為base64以包含HTML標記的優勢。 你可能會過分思考這一點。

我不認為你可以通過將圖像數據重新編碼到base 64來“保存”字節，主要是因為base 64是比原始數據中使用的編碼更窄的字符集（想想二進制111 =十進制7 ），所以我期望實際產量更大。 （但這只是我的理論制作，如果我錯了，請糾正我。）

但是，如果您確實管理，例如，重新編碼到最多相同大小的標記，那么您沒有在“更快下載”方面取得任何進展。 您仍在下載相同數量的數據。 最有可能更多。

如果您管理較小的有效負載，編碼/重新編碼的性能是否值得？ 更不用說跨瀏覽器兼容性了。

一種更好的技術是將圖像打包成單個圖像文件（這是練習的精神），然后讓瀏覽器正常下載。 一旦下載了一個圖像副本，只要它被瀏覽器緩存，它就不再下載了。

要回答關於網頁緩存的編輯，是的，您的網頁將被緩存。 你的base-64編碼圖像也是如此。 但你的圖像是有效的HTML標記的一部分，他們將與 HTML頁面緩存。

例如，如果我下載foo.html （包括我編碼的精靈文件），我肯定會像往常一樣得到我的標記。 該頁面已緩存。

現在，我下載了bar.html （它也使用了我的精靈文件）。 我希望您的圖像不會從bar.html訪問緩存，因為就瀏覽器而言，該圖像是foo.html的HTML標記的一部分。 它可能甚至不會意識到那里有一個楔入的圖像。

緩存的工作方式（我能理解的最好）是URL匹配 。 這就是為什么如果我在一個頁面中下載facepalm.jpg在另一個頁面再次請求facepalm.jpg ，瀏覽器會識別出我已經下載了它，所以它沒有。

根據您的編碼計划，我不會從bar.html請求foo.html （或其中的一部分），因此我希望您的圖像緩存不會像您期望的那樣在您的問題中運行。

如果我再次訪問foo.html ，我將獲得緩存該頁面的所有好處，因為我之前已經“下載了”。

Answer 2

我同意，更好的計划是使用帶有許多精靈的單個圖像，然后使用

background: url(...)
background-position: 0px 0px;

CSS中的屬性。 這樣你就只能加載1個圖像，這個圖像可以緩存。

Answer 3

你可以使用var imgSrc = $("#yourImage").attr("src"); 然后使用$("img").attr("src", imgSrc); 完成你所要求的。

我不確定將它編碼為base64是最好的選擇，因為base64圖像不會被緩存，所以每次訪問頁面都會重新加載。 現在，它已被廣泛接受，base64編碼增加了大約33％的文件大小。

Answer 4

我認為base64是一個壞主意。 只需正常加載精靈。

不要盲目地尋求不惜一切代價消除所有可能的HTTP請求。 （即使“這就是谷歌的作用。”）實現良好的表現是一種平衡的行為，鑒於瀏覽器之間的差異，它更像是一門藝術，而不是科學。

你不想這樣做的原因：

您的圖片精靈不會跨頁面緩存 - 換句話說，您必須在每個頁面上傳輸整個圖像。 假設單獨提供的圖像具有適當的緩存頭，后續頁面請求將更慢並浪費帶寬。
Base 64編碼本質上浪費了帶寬。 Base64編碼的文件將大於原始33％。 這對於幾千字節大的文件來說無關緊要，但這對於大型文件（如圖像精靈）來說將是一個大問題。
正如您所知，您必須在頁面上的每個<img>標記中復制base64編碼的精靈，這非常浪費，並通過腳本修復此問題將我們帶到......
您的圖像依賴於JavaScript，這是一個壞主意。 如果腳本沒有加載怎么辦？ JavaScript已關閉？
消除此圖像HTTP請求實際上並沒有在頁面顯示之前多長時間內完成，因為圖像不會阻止DOM准備就緒。 重要的是減少對阻止呈現的內容的HTTP請求：腳本和CSS。 （在大多數情況下，每個請求一個。）在腳本和CSS完全加載之前，您的頁面根本不會呈現。 但是，在下載圖像之前，頁面會進行渲染（盡管空白）。
您需要使用數字HTTP請求來平衡圖像類型。 圖標等通常應該在PNG中進行，以便盡可能多的圖像在一個HTTP請求中下載。 任何攝影本質上都需要進入自己的 JPEG。 不要將PNG用於照片。 這是錯誤的壓縮算法，並且會導致文件比同類JPEG大1000％。