如何使用數據URI延遲圖像加載？

我正在使用數據URI將圖像加載到一頁，並且將script放在我的HTML末尾。與使用圖像src的普通url不同，數據將直接加載到html頁面的HTTP請求中。如何使用數據URI延遲圖像加載？

因此，script將在頁面末尾加載很晚，因爲我通過這種方式加載了數百個圖像數據。

我想先載入腳本或者與imate的載入異步，有沒有辦法延遲圖像的加載data？

<div> 
    <img src="data:image/png; base64, .........." alt=""> 
    <img src="data:image/png; base64, .........." alt=""> 
    <img src="data:image/png; base64, .........." alt=""> 
</div> 
<script type="text/javascript" src="my-script.js"></script>

來源

2011-11-11 steveyang

您可以隱藏div或圖像，並且一旦腳本加載顯示它們，或使用可視性保持佈局完好 – david

圖像可以隱藏但仍然會**加載**，但它不能解決延遲加載腳本的問題 – steveyang

這個答案是非常簡單的。如果您不希望圖像與頁面加載同步加載，則不要使用內聯圖像數據URI。您正在獲取您爲您的網頁編碼的行爲。

遠程圖像URL（非數據URI）異步加載，您可以在加載腳本時運行。

或者，您可以將所有數據URI放入頁面中的大字符串數組中，然後在完成其他JavaScript後使用javascript從數據URI構建圖像對象。

來源

2011-11-11 17:56:08 jfriend00

最後一個 - 把日期URI放到一個大的字符串數組中 - 可能是一個工作，雖然使用JS來傳輸數據並不優雅，並且網站將關閉jS根本不會收到圖像。 – steveyang

你問了什麼選擇，我們只是向你解釋。您應該選擇最適合您情況的選項。使用zillion數據URI對我來說毫無意義。 Web瀏覽器的設計並不能很好地解決這個問題。它們旨在處理許多常規圖像URL的問題。 – jfriend00

當然，它很醜。在數據URI將被使用的約束下，似乎沒有完美的解決方案來加載以下腳本異步。我將中止數據URI並考慮其他解決方案，以加快映像加載並啓用異步腳本加載。 – steveyang

如何使用數據URI延遲圖像加載？

回答

相關問題