javascript - 如果源发生更改，则仅在加载时才显示新图像

Question

我遇到了一个问题，因为上一个图像保留在屏幕上，直到加载下一个图像。

我的程序使用流程图，其中某些问题需要各种图像。我一直在使用以下代码将源从一个源更改为另一个源。

HTML:

 <img class= 'right' id= 'imageBox' style= 'width: 20%; height: auto;' src= www.1stimage.com/>

JavaScript:

document.getElementById("imageBox").src = 'www.2ndimagesite.com';

如果计算机连接速度较慢，第一个图像可能会在屏幕上停留最多 10 秒，然后才会显示下一个图像。如何让它在完成之前不显示任何内容？

谢谢。

Answer 1

预加载图像并在加载后更新 src:

var img = new Image();
var newsrc = 'www.2ndimagesite.com';
img.onload = function () {
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;