使用Javascript：圖像對象 - > HTML圖像元素

該代碼預先加載的圖像成圖像對象，然後（假定）將其設置爲圖像元素的src上HTML：使用Javascript：圖像對象 - > HTML圖像元素

<!DOCTYPE html> 
<html> 
    <head> 
    <script language="javascript"> 
     window.onload = function() { 
      var oImage = new Image(); 
      oImage.onload = function() { 
       document.getElementById('myImage').src = oImage; 
       alert('done'); 
      }; 
      oImage.src = 'image1.jpg'; 
     } 
    </script> 
    </head> 
    <body> 
    <img id="myImage" src="" /> 
    </body> 
</html>

爲什麼它不工作？

來源

2014-01-06 Azevedo

哪裏是你的 'image1.jpg' 在什麼位置？它與HTML文件在同一個文件夾中嗎？ –

是的。我在本地測試它。 – Azevedo

嘗試

<!DOCTYPE html> 
<html> 

<head> 

    <script language="javascript"> 
     window.onload = function() { 

      var oImage = new Image(); 

      oImage.onload = function() { 
       document.getElementById('myImage').src = oImage.src; 
       alert('done'); 

      }; 

      oImage.src = 'image1.jpg'; 
     }; 
    </script> 

</head> 

<body> 
    <img id="myImage" src="" /> 
</body> 

</html>

您不能SRC設定的圖像，你必須將其設置爲圖像的SRC。（PS：在結尾加上分號，改變.src = oImage到.src = oImage.src）

DEMO

來源

2014-01-06 16:29:49 Cilan

是的，這是解決方案。我剛剛在我的小提琴中發現了這個：http://jsfiddle.net/Y2nPc/2/ –

嗯，它的工作原理。但使用**。src **不會再加載圖像嗎？我的意思是，它與document.getElementById（'myImage'）不同。src ='image1.jpg''？目的是提前加載一堆圖像。（prelodaing） – Azevedo

瀏覽器通常會在加載一次後在本地保存所有加載的圖像，以防止每次在網站中加載頁面時重新加載圖像。使用JavaScript預加載圖像只是將圖像添加到本地目錄。你的瀏覽器應該完成剩下的工作同樣在會話期間，您的JavaScript圖像被加載到瀏覽器緩存中。 –

使用Javascript：圖像對象 - > HTML圖像元素

回答

相關問題