用src屬性預加載圖片

在互聯網上閱讀了很多「使用javascript預加載圖片」標題，我找到了相同的解決方案。下面是一個簡單的示例代碼預加載圖像與「stuff.jpg」名稱：用src屬性預加載圖片

<script> 
    var img = new Image(); 
    img.src = "stuff.jpg" 
</script>

但是我覺得沒有源告訴我什麼是真正的「源」屬性定義它什麼時候（如img.src = 「stuff.jpg」）。我的想法是，它只是通過一個字符串（即「stuff.jpg」）設置「src」屬性爲img，並且尚未加載真實圖像。但我對我的想法相當不情願，因爲如果它是正確的，那麼上面的代碼將毫無價值。你能告訴我在上面的代碼中src實際上做了什麼，如果你能給我一個源代碼給你解釋，那將是非常棒的。謝謝。

來源

2012-11-22 Lac Viet

'src'指向一個圖像。 – alex

爲什麼你認爲創建一個圖像並設置其'src'不會導致瀏覽器獲取真實的東西？ –

瀏覽器不需要知道它應該下載一個圖像。它的純粹存在應該就足夠了。 –

是的，你的代碼實際上加載了圖像。設置圖像對象的src加載圖像，現在只需將img添加到DOM。

喜歡的東西：

var div = document.getElementById('theImg'); 
div.appendChild(img);

當然做這樣無所作爲，而如果圖像顯示在針對某些事件，單擊按鈕或東西，那麼你實際上預加載的圖片。

您可以在開發者工具在Chrome中執行代碼並查看網絡選項卡測試這一點，並看到圖像實際上是從服務器請求，即使你不把它添加到DOM

來源

2012-11-22 03:21:45 Jaime

謝謝Jaime，我發現你的答案真的很有幫助 –

用src屬性預加載圖片

回答

相關問題