IE does not load image when it is specified from JS

Royan · Oct 23, 2007

Ok this is more then strange but this is how the following code works
in IE:

<html>
<head>
<meta http-equiv=Content-Type content="text/
html;charset=windows-1251">
</head>
<body>
<script>
function reloadImage() {
var oImg = document.getElementById("myImage");
oImg.src = "http://www.google.com/images/nav_logo3.png";
}
</script>
<img id="myImage" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/
y3.gif">
<br/><br/>
<a href="javascript:;" onClick="reloadImage()">ðÏÍÅÎÑÔØ
ÉÚÏÂÒÁÖÅÎÉÅ</a>
</body>
</html>

As you can see the browser must simply change Yahoo logo to Google
logo, but for some reason such code does not work in IE6 (Opera/
Firefox are OK)
This is definitely not a problem of changing gif to png as I have
experimented with two gifs and even jpegs.

Can anyone explain what am I doing wrong and how do i make this code
work?

xprotocol · Oct 23, 2007

Ok this is more then strange but this is how the following code works
in IE:

<html>
<head>
<meta http-equiv=Content-Type content="text/
html;charset=windows-1251">
</head>
<body>
<script>
function reloadImage() {
var oImg = document.getElementById("myImage");
oImg.src = "http://www.google.com/images/nav_logo3.png";
}
</script>
<img id="myImage" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/
y3.gif">
<br/><br/>
<a href="javascript:;" onClick="reloadImage()">ðÏÍÅÎÑÔØ
ÉÚÏÂÒÁÖÅÎÉÅ</a>
</body>
</html>

As you can see the browser must simply change Yahoo logo to Google
logo, but for some reason such code does not work in IE6 (Opera/
Firefox are OK)
This is definitely not a problem of changing gif to png as I have
experimented with two gifs and even jpegs.

Can anyone explain what am I doing wrong and how do i make this code
work?

This is strange. It's not just changing the src attribute that's an
issue, even dynamically appending a brand new image will result in the
space being occupied but the image not displaying. I've changed the
src attribute on images numerous times in my web apps with no
problems. Interestingly, if you right click on the space and goto
"Show Picture", it will display.

Henry · Oct 23, 2007

On Oct 23, 3:51 pm, Royan wrote:

<a href="javascript:;" onClick="reloadImage()">

Can anyone explain what am I doing wrong and how do i make
this code work?

Executing a javascript pseudo protocol HREF in IE puts the browser
into a 'pending navigation' state (in which it stays until real
navigation occurs). In this state various facilities no longer work
(or work as expected), including the fetching of new image resources
for the page (from a server or from the cache).

Royan · Oct 23, 2007

On Oct 23, 3:51 pm, Royan wrote:

Executing a javascript pseudo protocol HREF in IE puts the browser
into a 'pending navigation' state (in which it stays until real
navigation occurs). In this state various facilities no longer work
(or work as expected), including the fetching of new image resources
for the page (from a server or from the cache).

Yes thats correct and this is exactly whats happening, so replacing
href value with the wollowing href="#" or simply removing it fixes the
issue

Thomas 'PointedEars' Lahn · Oct 23, 2007

Royan said:
Ok this is more then strange but this is how the following code works
in IE:

[fantasy code]

Using Valid markup might help. http://validator.w3.org/

PointedEars

Thomas 'PointedEars' Lahn · Oct 23, 2007

Royan said:
Yes thats correct and this is exactly whats happening, so replacing
href value with the wollowing href="#" or simply removing it fixes the
issue

But it introduces at least one other. Correct is:

<script type="text/javascript">
document.write('<a href="" onclick="reloadImage(); return false;">'
+ '...<\/a>');
</script>

Of course it would be better would an `input' element be used in the first
place:

<script type="text/javascript">
document.write('<input value="..." onclick="reloadImage();">');
</script>

PointedEars

xprotocol · Oct 26, 2007

Yes thats correct and this is exactly whats happening, so replacing
href value with the wollowing href="#" or simply removing it fixes the
issue

Tried href="#" and it works ok except it causes a slight scroll down
on the page. Are there other options here? I don't want to remove
the href attribute because then the anchor won't keep the standard
look (ie underline, blue, purple when clicked).

Thomas 'PointedEars' Lahn · Oct 26, 2007

xprotocol said:
Tried href="#" and it works ok except it causes a slight scroll down
on the page. Are there other options here?

Reading and implementing what was posted before would be a good idea.

<[email protected]>

PointedEars

offsetLeft bug with borders in IE when width: is specified?	10	Jan 10, 2006
CSS hover image link not working in IE	1	Oct 1, 2011
Image Load in IE vs. Mozilla	7	Nov 30, 2003
Cant correctly load .js files when creating page dynamically in IE	4	Oct 15, 2004
Dynamic load of js script failure in IE 6	1	Aug 23, 2003
The XMLHttpRequestObject does not seem to work on IE 6 or 7	7	Dec 7, 2007
IE CSS image overlap	6	Apr 5, 2007
Why does this script work with IE and not with Firefox ?	2	Jul 21, 2005

IE does not load image when it is specified from JS

Royan

xprotocol

Henry

Royan

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

xprotocol

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads