Question

请回答这个问题，因为我正在努力解决这个问题。

我正在尝试更改鼠标上的图像源。我能够做到，但图片没有在页面上显示。

我正在尝试将图片源更改为跨域网址。我可以看到在DOM图像源中正在发生变化，但在页面上却没有。

我已经尝试了LINK中提到的所有解决方案，但它们都没有奏效。请让我解决问题。
注意：

我可以在网络标签中看到图片需要一些时间下载（约1秒）。
这是一个中间问题，有时图像正在加载，有时它不是

CODE：

 document.getElementsByTagName('img')[0].addEventListener('mouseover', function() 
{
    document.getElementsByTagName('img')[0].setAttribute('src', 'url/of/the/image');
});

Answer 1

您是否尝试过将图像加载到其他所有内容之前？

function initImages(){
    var imC = 0;
    var imN = 0;
    for ( var i in Images ) imN++;
    for(var i in Images){
        var t=Images[i];
        Images[i]=new Image();
        Images[i].src=t;
        Images[i].onload = function (){ 
            imC++; 
            if(imC == imN){
                console.log("Load Completed");
                preloaded = 1;
            }
        }
    }

}

和

var Images = {
    one image: "path/to/1.png",
    ....
}

然后

if( preloaded == 1 ){
    start_your_page();
}

Answer 2

此处代码将删除img标记并将其替换为新标记：

＆＃13;

document.getElementsByTagName('img')[0].addEventListener('mouseover', function() {
  var parent = document.getElementsByTagName('img')[0].parentElement;
  parent.removeChild(document.getElementsByTagName('img')[0]);
  var new_img = document.createElement("img");
  new_img.src = "https://upload.wikimedia.org/wikipedia/commons/6/69/600x400_kastra.jpg";
  parent.appendChild(new_img);
});

＆＃13;

<img src="https://www.w3schools.com/w3images/fjords.jpg">

＆＃13;

Answer 3

我使用代码解决了这个问题：

function displayImage() {
    let image = new image();
    image.src="source/of/image/returned/from/service";
    image.addEventListener('load', function () { 
        document.getElementsByTagName('img')[0].src = image.src;
    },false);
}

在代码中，我将加载事件附加到图像，图像源将在加载图像后更改。

使用JavaScript

3 个答案: