Question

我正在尝试使用javascript在HTML按钮上切换图像。

它有效，但我认为每次点击按钮都会加载图像，但这并不好。所以我只想加载图像一次，而不是在图像之间切换。这就是我现在所拥有的。

mute.onclick=function () {

if (audioEngine.isMuted)
    {
    document.getElementById('muteIcon').src="images/unmuted.png";
    }       
         else{
           document.getElementById('muteIcon').src="images/unmuted.png";
             }

但我认为每次点击按钮时，它都会在路径“images / unmuted.png”中查看其中的内容并加载它。所以我认为这是一个简单的解决方案。我只是定义一个变量unmuteImage并将其分配给document.getElementById（'muteIcon'）。src。喜欢这个

var unmuteImage=new Image();
    unmuteImage.src='images/unmuted.png';

mute.onclick=function () {

if (audioEngine.isMuted)
    {
    document.getElementById('muteIcon').src=unmuteImage;
    }       
         else{
           document.getElementById('muteIcon').src="images/unmuted.png";
             }

但是当我这样做时，我的consols中出现以下错误：

GET file:///path/to/the/mian/html/file/[object%20HTMLImageElement]  (In red text)

而且我没有得到图像，我得到了“borken图像”图片，因为不知何故它找不到图片。

是的，有人能帮帮我吗？感谢

Answer 1

如果你有jquery

，这可能对你有用

$('#muteIcon').replaceWith(unmuteImage);

另外，你必须使用src本身

document.getElementById('muteIcon').src = unmuteImage.src;

无法将html .src分配给javascript变量

1 个答案: