JavaScript嘗試更改圖像

Question

同一文件夾目錄中有四個文件

- 1.jpg 
- 2.jpg 
- index.html 
- 1.js

我希望編寫代碼，這樣它將首先加載1.jpg ，但接下來將加載2.jpg

JavaScript是

var img = new Image();   // Create new img element
img.src = '2.jpg';


var getElementIMG = document.getElementById("imageid");
getElementIMG.src = img.src;

HTML是

<img id="imageid" src="1.jpg">

但頁面加載完成后仍顯示1.jpg

Answer 1

如果您的Javascript位於header ，則需要指定何時要替換image （即image何時存在）。

加載window后：

window.onload = function () {
    document.getElementById("imageid").src = "2.jpg";
}

演示： http : //jsfiddle.net/5a6Jx/2/

或者，您可以將script粘貼在頁面末尾：

<img id="imageid" src="1.jpg" />

<script type="text/javascript">
    document.getElementById("imageid").src = "2.jpg";
</script>

無論哪種方式，您的image都已經存在，因此您可以對其進行操作。

Answer 2

<head> <script type="text/javascript" src="1.js"></script> </head>

該腳本被加載到頭部並立即執行。 沒有元素'#imageid'，因此document.getElementById返回null 。 getElementIMG.src = img.src;上可能會引發錯誤getElementIMG.src = img.src; 線。 如果某事不起作用，您應該做的第一件事就是檢查調試器/控制台中的錯誤。 （在大多數瀏覽器中為F12。）
在頁面的后面，瀏覽器會看到圖像。 顯示它。

您要做的是在圖像后加載腳本。 如果將其放在頁面的末尾， <img>將被瀏覽器看到，只有在此之后，它的src才會被更改。

Answer 3

嘗試這個：

<!doctype html>
    <html>
       <body>
          <img id="imageid" src="1.jpg">
          <script>
              var getElementIMG = document.getElementById("imageid");
              getElementIMG.src = '2.jpg';
          </script>
       </body>
    </html>

Answer 4

當文檔和圖像都被加載時，您將不得不采取行動。

window.onload = function () {
    var img = new Image();
    img.src = '2.jpg';

    img.onload = function() {
        var getElementIMG = document.getElementById("imageid");
        getElementIMG.src = img.src;
     }
}

JavaScript嘗試更改圖像

問題描述

4 個解決方案

解決方案1
0 2014-01-08 21:54:24

解決方案2
0 2014-01-08 21:54:40

解決方案3
0 已采納 2014-01-08 21:58:29

解決方案4
0 2014-01-08 22:04:45

JavaScript嘗試更改圖像

問題描述

4 個解決方案

解決方案1 0 2014-01-08 21:54:24

解決方案2 0 2014-01-08 21:54:40

解決方案3 0 已采納 2014-01-08 21:58:29

解決方案4 0 2014-01-08 22:04:45

解決方案1
0 2014-01-08 21:54:24

解決方案2
0 2014-01-08 21:54:40

解決方案3
0 已采納 2014-01-08 21:58:29

解決方案4
0 2014-01-08 22:04:45