获取新图像仅在源更改时才会显示

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;

Answer 2

你可以稍微改变一下，以达到你想要的效果。

1. 您可以预先加载图片，然后选择要显示的图像。您可以在此处详细了解：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

2. 您可以开始加载新图像异步并将当前图像更改为图像，如加载微调器或某些图像，这表示此刻正在加载某些内容（例如：）在{{1}上处理程序你将把这个微调器重写为加载的图像。

我想写@witht写的相同内容。顺便说一句，我不认为他的代码会对你有所帮助。我想你会达到和你在答案中所说的相同的效果。无论如何，他是第一个，他的答案很接近，所以我将使用他的例子。

onload

因此，在加载的页面上加载了旧图像。你做了一些动作，例如按下按钮。如果速度较慢，则会显示加载微调器，并且在新图像加载异步后，将显示新图像。如果您有速度，则会立即显示新图像。

希望这会对你有所帮助！

Answer 3

document.images[i].complete 

如果加载了picture [i]源，

将为true。 你可以预先加载所有图片，直到状态改变为止。