IE does not show updated IMG SRC changes made in Javascript

Question

QUESTION: IE versions 7 and 8 do not show updated IMG SRC change made in JavaScript

You can see what I mean, if you go to the URL below, and at the bottom left (3) I want another insert, you select one of the patterns; let's say you choose Asahi Chartreuse. Note that nothing happens with the preview on the left. BUT then, if you go further and select a different pattern, you will see a preview in the left scene to show Asahi Chartreuse. So this is one thing. This is why I think this is an “upgrade” problem. It works fine in Chrome.

In IE: note that if you click on some other control, the update will happen.

You can see the code here: https://www.casemodo.com/test.asp

WHAT I GOT SO FURTHER:

I tried adding headers to say no-cache.

I tried adding "?" and a random number after the png file name.

I tried setting focus () to the image after changing src.

I tried changing src to say style.display to be hidden and then visible.

I tried to create a hidden (not hidden) text input field on the page and then set focus () for it after changing img src.

I tried setting window.focus ().

I tried (as you see now) to set a warning after changing src.

GUESS: Now it looks like this: the JavaScript engine just pauses after I installed this src, when you manually click (focus) on another place on the screen. Thus, he never gets to all of the scenarios that I tried above.

Answer 1

Set the src attribute to null, and then set it to the new URL:

in jquery:

var myImg = $('#myImg'); myImg.attr('src', null); myImg.attr('src', newUrl); 

in direct js:

 var myImg = document.getElementById('myImg'); myImg.src = null; myImg.src = newUrl 

It worked for me - it drove me crazy!

Answer 2

Try using onclick instead of onchange. The latter does not work with some form elements in some browsers.

Answer 3

I saw similar IE issues resolved with seemingly strange remapping innerHTML. Suppose container is a variable referring to parentNode from img. Try "container.innerHTML = container.innerHTML". This leads to re-rendering and may result in erroneous img.

Answer 4

Comments on the question:

• Please include the code snippet in the question.
• Was javascript in the onchange event or where?
• If the client browser is Google Chrome, does it work? (Sounds like another-other-IE-image-src error.)
• The demo page you linked to has been modified since this question was posted; as I write this, clicking on the sample invokes submit, which causes another page to load.

Sentence:

• Use setTimeout , so the actual change occurs when a timeout event occurs, rather than in the event stream of the original GUI. For example, if the original javascript was

   SomeFunction(); 

  change it to

   setTimeout(SomeFunction, 10); 

  (where image.src = newURL; is executed inside SomeFunction )

Answer 5

This question is probably no longer relevant, but we faced the same problem today when we checked backward compatibility for one of our libraries.

The only thing that helped us was to replace the image element itself before changing the value of the src attribute:

 var myImg = document.getElementById('myImg'); myImg.parentNode.replaceChild(myImg, myImg); myImg.src = newUrl; 

Answer 6

I was working with lazy loading implementation and ran into a similar problem. For some reason, after changing the data-srcset attributes to srcset in the code, even when using the other approaches described on this page, the elements did not seem to receive new attribute values. After some research, I got to this page on github , which talked about fixing a bug in the plugin for delayed loading. This gave me the idea, instead of using the replacement option described here or your_element.src=null approach, to use something like this:

 your_element.setAttribute("src", your_element.getAttribute("data-srcset")); 

And it worked for me.