加载图像源的JavaScript保持页面闪烁

Question

我是Javascript的新手， 我尝试制作一个简单的程序，在按钮点击时更改图像源。 图像正在加载但立即删除。 它只有在我从身体的onload事件调用图像源加载函数时才有效。 但结果是wromg： 它使用错误的图像源加载所有页面，然后调用onload函数 - ＆gt;导致页面闪烁两次，直到满载。 我的最终目标是允许一个初始图像加载，然后通过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，图像就会立即出现。

那就是说，更好的方法是使用精灵。

Answer 2

＆＃34;提交＆＃34;在<?php $str = "Future plan | Low | Normal | High | Highest"; print_r (explode("|",$str)); ?> 中调用将强制重新加载页面 - 尝试删除该页面。

Answer 3

您可以做的是将事件绑定到按钮本身的onclick事件，如此

jsFiddle https://jsfiddle.net/a3pv8j71/1/

Html

<img id="mainImg" src="http://www.squirrelsandmore.com/media/wysiwyg/feline_cat_img.jpg">
<button type="submit" onclick="changeImage()">Change img
    </button>

的Javascript

function changeImage() {
    document.getElementById("mainImg").src = 'http://photos.jibble.org/Experimental/Flying%20Cat/IMG_4821%20Flying%20cat%20.JPG';
}