JavaScriptで画像ソースが変更されていません

Question

この質問には、私が多く苦労しているので、この質問に答えてください。

マウスで画像ソースを変更しようとしています。私はそれをすることができますが、イメージはページに表示されていません。

イメージソースをクロスドメインURLに変更しようとしています。私は、DOMの画像ソースでは変化しているが、ページではないことがわかります。

LINKに記載されているすべてのソリューションを試しましたが、いずれも機能していません。 私に問題を解決させてください。
注：

1. 私はネットワークタブの画像で見ることができるが（約1秒）をダウンロードするのに時間がかかっています。
2. それはいつか画像がCODEロード、時にはそのない

され、中間の問題である：

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

Answer 1

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

コードで、私は画像への負荷イベントを添付していますが、画像のソースが変更されます。

Answer 2

は、あなたが他のすべての前のイメージのロードを試みたがありますか？

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 3

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">