圖片來源：JavaScript不改變

-2

請回答這個問題，因爲我正在努力掙扎。圖片來源：JavaScript不改變

我想改變鼠標的圖像源。我能夠做到這一點，但圖像不顯示在頁面上。

我在嘗試將圖片源更改爲跨網域網址。我可以看到，在DOM圖像源正在改變，但在頁面上沒有。

我試過LINK中提到的所有解決方案，但沒有一個能夠工作。請讓我解決問題。
注：

我可以在網絡選項卡上的圖像看到的是花一些時間來下載（約1秒）。
它是一箇中間的問題，有時圖像加載，有時它不是

CODE：

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

來源

2017-10-17 Tavish Aggarwal

請把一些代碼，以幫助您 –

@ÁlvaroTouzón補充說。代碼沒有問題。我正在努力改變圖像來源與跨域URL –

最好的猜測是水蛭保護。當然，你已經測試過，如果你把它作爲一個沒有JavaScript的標籤放在頁面上，這個圖片就可以工作嗎？ – JJJ

我解決了使用代碼的問題：

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

在這裏，在代碼中，我安裝載荷事件圖像，圖像加載後的圖像源將被改變。

來源

2017-10-17 09:12:18

有你嘗試了一切之前加載圖像？

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

來源

2017-10-17 06:59:27 Amber

我從服務調用中獲取圖像，並且此調用在mouseover上。因此，在頁面加載時，我不知道我擁有的那組圖像。 –

這裏的代碼，將刪除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">

來源

2017-10-17 07:44:21

使用這種方法，在創建新的img標籤時，我們需要爲所創建的新圖像標籤添加mouseout事件，這又是一個挑戰。 –

爲什麼你需要有一個鼠標事件？ –

在mouseout上我想恢復原始圖像。 –

圖片來源：JavaScript不改變

回答

相關問題