Javascript加载图片源保持页面闪烁

javascript to load image source keeps the page blinking

本文关键字：闪烁 加载 Javascript      更新时间：2023-09-26

我是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>

我假设您正在尝试预加载图像。这就是你要做的。

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

然后当你准备好了(按钮点击)，只需交换出src和图像将立即出现。

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

你能做的就是将你的事件绑定到按钮本身的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';
}

<button>中的"submit"调用将强制页面重新加载-尝试删除它

相关文章：