加载图像源的 javascript 使页面保持闪烁答案

【问题标题】：javascript to load image source keeps the page blinking加载图像源的 javascript 使页面保持闪烁
【发布时间】：2015-08-04 16:30:17
【问题描述】：

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

【问题讨论】：

标签： javascript image loading

【解决方案1】：

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

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

然后当你准备好（点击按钮）时，只需换出 src，图像就会立即出现。

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

【讨论】：

谢谢，它帮助我实现了在不重新加载页面的情况下加载图像的最终目标

【解决方案2】：

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

【讨论】：

【解决方案3】：

<button> 中的“提交”调用将强制页面重新加载 - 尝试删除它。

【讨论】：

谢谢，将其更改为 type="button" 修复了页面重新加载