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，即存在时。

加载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;行可能会引发错误。如果某些东西不起作用，你应该做的第一件事就是检查调试器/控制台中的错误。（在大多数浏览器中为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 个答案: