javascript加载图像源使页面闪烁

Question

我是 JavaScript 新手，我尝试制作一个简单的程序，可以在单击按钮时更改图像源。图像正在加载但立即被删除。仅当我从正文的 onload 事件调用图像源加载函数时，它才有效。但结果是错误的:它使用错误的图像源加载所有页面，然后调用 onload 函数 -> 导致页面闪烁两次，直到完全加载。我的最终目标是允许加载一个初始图像，然后通过 JavaScript 单击按钮更改图像(不调用服务器)。提前致谢

function load() {
        document.getElementById("mainImg").src = 'Koala.jpg';
    }

<button type="submit" name="btn0101" value="btn" onclick="load()" >
                            <img src="iconUnavail.png" id="mainImg" />
                            </button>

Answer 1

我假设您正在尝试预加载图像。这就是你如何做到这一点。

var myImage = new Image(100, 100)
myImage.src = "mainImg"

然后，当您准备好(单击按钮)时，只需交换 src，图像就会立即出现。

<小时/>

也就是说，更好的方法是使用 Sprite 。