从javascript加载图片 [英] Load Image from javascript

问题描述

在我的相册幻灯片页面上，我的代码类似于

On my album slide show page, i have code like

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

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

in showImage（），我相信图像被加载，所以我显示图像并隐藏加载器。

in showImage(), i am sure the image is loaded, so i show the image and hide the loader.

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

Now when user clicks on next, i need to change the src of the image. Now i need don't know how to set src only when image is loaded.

推荐答案

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

you can just append another hidden img element and swap them in onload event.

或使用单个图像元素并使用如下的javascript：

Or use single image element and use javascript like:

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

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

this code should preload the image and show it when it's ready

这篇关于从javascript加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！