javascript - 从javascript加载图像

Question

在我的相册幻灯片放映页面上，我有这样的代码

<span style="display:none;">
   <img id="id1" src="~$imageUrl`" onload="javascript:showImage();">
</span>

<span>
    // show loader.
</span>

在 showImage() 中，我确定图像已加载，所以我显示图像并隐藏加载器。

现在当用户点击下一步时，我需要更改图像的 src。现在我不知道如何仅在加载图像时设置 src。

Answer 1

您可以附加另一个隐藏的 img 元素并在 onload 事件中交换它们。

或者使用单个图像元素并使用 javascript，例如:

var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
    _img.src = this.src;
}
newImg.src = 'http://whatever';

此代码应预加载图像并在准备就绪时显示它