使用JavaScript

时间:2017-10-17 06:03:40

标签: javascript image

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

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

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

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

  1. 我可以在网络标签中看到图片需要一些时间下载(约1秒)。
  2. 这是一个中间问题,有时图像正在加载,有时它不是
  3. CODE:

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

3 个答案:

答案 0 :(得分:0)

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

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();
}

答案 1 :(得分:0)

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



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

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

答案 2 :(得分:0)

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

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

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