javascript加载图像源使页面闪烁

Question

I am new to Javascript, I try to make a simple program which changes image source on button click. the image is being loaded but immediately deleted. it works only if I call the image source loading function from the onload event of the body. but than the result is wromg: it loads all the page with the wrong image source and than call the onload function -> resulted in page that blinks twice until fully loaded. My final goal is to allow one initial images loading and than change images on button click from javascript (not calling the server). Thanks in advance

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

I assume you are trying to preload images. This is how you do that.

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

Then when you are ready (button click), just swap out the src and the image will appear immediately.

---

That said, a better way would be to use sprites.

Answer 2

<button>的“ submit”调用将强制重新加载页面-尝试删除该页面。

Answer 3

What you can do is bind your event to the onclick event in the button itself like so

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';
}