Image source not changing with JavaScript

Question

Please answer this question, as I am struggling a lot with it.

I am trying to change image source on mouse over. I am able to do it, but image is not displaying on page.

I am trying to change image source to cross domain URL. I can see that in DOM image source is changing but on page its not.

I have tried all solutions mentioned in LINK, but none of them is working. Please let me solution to problem.
NOTE:

I can see in network tab image is taking some time to download (about 1 sec).
It is an intermediate issue, sometime image is loading and sometimes its not

CODE:

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

@ÁlvaroTouzón added. there is no issue with code. I am struggling with changing image source with cross domain URL — Tavish Aggarwal, Oct 17 '17 at 06:07
Best guess is leech protection. Surely you have tested that the image works if you put it on the page as an tag without JavaScript? — JJJ, Oct 17 '17 at 06:07
No, @lumio.. its an intermediate issue, sometime image is loading and sometimes its not — Tavish Aggarwal, Oct 17 '17 at 06:12
How about removing the whole `img` tag and replacing it with a new one? — Karan Dhir, Oct 17 '17 at 06:58
Yes @KaranDhir I can do that.. Please help me with the code. — Tavish Aggarwal, Oct 17 '17 at 07:13

score 0 · Answer 1 · answered Oct 17 '17 at 06:59

have you tried loading images before everything else?

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

}

and

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

then

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

I am getting images from service call, and this call is on mouseover.. So at time of page load I dont know the set of images that I have. — Tavish Aggarwal, Oct 17 '17 at 07:14

score 0 · Answer 2 · answered Oct 17 '17 at 07:44

0

Here the code that will remove the img tag and replace it with a new one:

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

answered Oct 17 '17 at 07:44

Karan Dhir

731
1
6
24

Using this approach, on creating new img tag then we need to add mouseout event to new image tag created, which is again a challenge. – Tavish Aggarwal Oct 17 '17 at 07:48
Why do you need to have a mouseout event? – Karan Dhir Oct 17 '17 at 07:56
On mouseout I want to restore original image. – Tavish Aggarwal Oct 17 '17 at 07:56
Yes indeed! Do you want me to write the code for that too? – Karan Dhir Oct 17 '17 at 07:58
I have atleast 100 + images on page and this approach doesn't seems correct to me. And will introduce more issues/bugs in code. – Tavish Aggarwal Oct 17 '17 at 08:00

Tavish Aggarwal · Accepted Answer · 2017-11-02T11:17:12.673

0

I resolved the issue using code:

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

Here in code, I am attaching load event to image, source of image will be changed after image is loaded.

edited Nov 02 '17 at 11:17

answered Oct 17 '17 at 09:12

Tavish Aggarwal

1,020
3
22
51

Image source not changing with JavaScript

3 Answers3