odd problem about innerHTML & img under IE

C

chunghe

Hi,

This problem confused me a lot.

I made a simple demo below, click the button will trigger show( )
function, which insert image node to a DIV using innerHTML
( pl.innerHTML += '<IMG SRC=" + url + ">'; ), it works fine under
FF but under IE6, no images displayed at all.

I've tried to copy the generated code to another HTML file and it
works fine. I've also tried to copy the images to local, 2 to 3 images
will show randomly. IE6 seems to stop loading images at some point. If
I made IE cached images, IE will display those cached images.

My question is why the image didn't display and how to make this
example work under IE6.

I've tried to search topics about this question but nothing found. Any
comment/direction/references will be very helpful, thank you!

http://kitty.2y.idv.tw/~chfang/test.htm

<html>
<head>
<style>
img{border: 1px solid #ccc; margin: 5px; padding: 5px}
</style>
<script>
var url = ['http://farm3.static.flickr.com/
2076/2049894366_451d331b2d_s.jpg',
'http://farm3.static.flickr.com/2295/2049893606_46dc73fa6e_s.jpg',
'http://farm3.static.flickr.com/2211/2049892838_9d74e2f0ab_s.jpg',
'http://farm3.static.flickr.com/2069/2049106017_a13746be15_s.jpg',
'http://farm3.static.flickr.com/
2342/2049105161_9ab219365e_s.jpg'];

function show(){
var pl = document.getElementById('photolist');
var i;

pl.innerHTML = '';
for(i=0; i<=url.length-1; i++){
pl.innerHTML += '<IMG SRC=" + url + ">';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show()">show</a>
<div id="photolist"></div>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

I made a simple demo below, click the button will trigger show( )
function, which insert image node to a DIV using innerHTML
( pl.innerHTML += '<IMG SRC=" + url + ">'; ), it works fine under
FF but under IE6, no images displayed at all.
Click to expand...


Use standardized W3C DOM creator and mutator methods instead of the
proprietary `innerHTML' property. It will save you a lot of trouble.

http://www.w3.org/TR/DOM-Level-3-Core/
[...]
My question is why the image didn't display and how to make this
example work under IE6.
[...]
http://kitty.2y.idv.tw/~chfang/test.htm
Click to expand...

I see five broken images in "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10".

Probably you have a caching problem. Try Ctrl/Command+Shift+R or Ctrl+F5 in
both UAs.
[...]
<a href="javascript:void(0)" onclick="show()">show</a>
Click to expand...

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

The rest of your markup is not at all Valid, so any observed malfunction is
not surprising. You should apply http://validator.w3.org/ to it, and make
the required modifications.


PointedEars
 
V

VK

<FAQENTRY>
FAQ 4.31 update suggested


Hi,

This problem confused me a lot.

I made a simple demo below, click the button will trigger show( )
function, which insert image node to a DIV using innerHTML
( pl.innerHTML += '<IMG SRC=" + url + ">'; ), it works fine under
FF but under IE6, no images displayed at all.
Click to expand...


"Bingo!", I guess: in continuation of my post
http://groups.google.com/group/comp.lang.javascript/msg/c2f4731fe253ce47
about FAQ 4.31 "Why are my rollovers so slow?"

This page (HTML 4.01 Strict btw) demonstrates the problem pretty
clearly if anyone has IE6 available.
From three images in use one is hardcoded on the page over IMG tag, on
button click three more images added dynamically where one is the same
as the hardcoded image (the first one). Only that one image gets
displayed. Others remain blank placeholders until one right-clicks on
them and chooses "Show Picture". Clearly and explicitly "cache attack"
protection I was talking about, nothing to do with any speacial/broken
content headers.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
img{border: 1px solid #ccc; margin: 5px; padding: 5px}
</style>
<script type="text/javascript">
var url = [
/* All array elements are URLs consisting of one line each.
* Remove accidental line breaks added by news reader if any.
*/
'http://farm3.static.flickr.com/2076/2049894366_451d331b2d_s.jpg',
'http://farm3.static.flickr.com/2295/2049893606_46dc73fa6e_s.jpg',
'http://farm3.static.flickr.com/2211/2049892838_9d74e2f0ab_s.jpg'
];

function show(){
var pl = document.getElementById('photolist');
var i;
var img;
pl.innerHTML = '';
for(i=0; i<url.length; i++) {
img = new Image;
img.src = url;
pl.appendChild(img);
}
}
</script>
</head>
<body>
<div><a href="javascript:void(0)" onclick="show()">show</a></div>
<div>
<img src='http://farm3.static.flickr.com/
2076/2049894366_451d331b2d_s.jpg' alt="">
</div>
<div id="photolist">&nbsp;</div>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

VK said:
<FAQENTRY>
FAQ 4.31 update suggested
Click to expand...

[x] nay
Hi,

This problem confused me a lot.

I made a simple demo below, click the button will trigger show( )
function, which insert image node to a DIV using innerHTML
( pl.innerHTML += '<IMG SRC=" + url + ">'; ), it works fine under
FF but under IE6, no images displayed at all.
Click to expand...


"Bingo!", I guess: [...]
Click to expand...


Again, and unsurprisingly, you guessed wrong. The images are broken in
Firefox, too.


PointedEars
 
R

Richard Cornford

... , it works fine under
FF but under IE6, no images displayed at all.
Click to expand...
<a href="javascript:void(0)" onclick="show()">show</a> ^^^^^^^^^^^^^^^^^^
<div id="photolist"></div>
Click to expand...
<snip>

Executing a javascript pseudo-protocol HREF in IE browsers (at least up
to 6) convinces the browser that it about to navigate away from the
current page (as would be the normal consequence of following the HREF
of a link) and puts the browser into a 'waiting' stat in witch various
facilities stop working (or working in the previously expected way). One
of the more often observed symptoms is the browser failing to
load/display new images. This is usually reported as the unexpected
stopping of image swapping with rollovers, but any failure in an image
related operation after the execution of a javascript pseudo-protocol
HREF might be attributed to this.

Richard.
 
D

Doug Gunnoe

Hi,

This problem confused me a lot.

I made a simple demo below, click the button will trigger show( )
function, which insert image node to a DIV using innerHTML
( pl.innerHTML += '<IMG SRC=" + url + ">'; ), it works fine under
FF but under IE6, no images displayed at all.

<a href="javascript:void(0)" onclick="show()">show</a>
<div id="photolist"></div>
</body>
</html>
Click to expand...


Hi.

Instead of using a div and innerHTML to write the img tag, why not
just use an img tag, then use the dom to set the src attribute?

Something like this..

img id = document.getElementById(yourIMGid);
id.src = "path to the image";

Also, I would preload the images.

Good luck.
 
D

Doug Gunnoe

img id = document.getElementById(yourIMGid);
id.src = "path to the image";
Click to expand...


Except don't use the above as written. :|

imgID = document.getElementById(yourIMGid);
imgID.src = "path to the image";
 
C

chunghe

^^^^^^^^^^^^^^^^^^> <div id="photolist"></div>

<snip>

Executing a javascript pseudo-protocol HREF in IE browsers (at least up
to 6) convinces the browser that it about to navigate away from the
current page (as would be the normal consequence of following the HREF
of a link) and puts the browser into a 'waiting' stat in witch various
facilities stop working (or working in the previously expected way). One
of the more often observed symptoms is the browser failing to
load/display new images. This is usually reported as the unexpected
stopping of image swapping with rollovers, but any failure in an image
related operation after the execution of a javascript pseudo-protocol
HREF might be attributed to this.

Richard.
Click to expand...

Thank you Richard. You solved my question! I simply remove the
javascript:void(0) and everything works as expected.
I never suspected the pseudo href would cause this problem.
I made a simple demo below to clarify the problem:
http://kitty.2y.idv.tw/~chfang/test-revised.htm
 
T

Thomas 'PointedEars' Lahn

Doug said:
Also, I would preload the images.
Click to expand...

Preloading made sense if you could control how the client's cache works.
Since you can't, the worst case is that you are downloading the same data at
least twice.


PointedEars
 
G

gilmartino

Hi,

This problem confused me a lot.

I made a simple demo below, click the button will trigger show( )
function, which insert image node to a DIV using innerHTML
( pl.innerHTML += '<IMG SRC=" + url + ">'; ), it works fine under
FF but under IE6, no images displayed at all.

I've tried to copy the generated code to another HTML file and it
works fine. I've also tried to copy the images to local, 2 to 3 images
will show randomly. IE6 seems to stop loading images at some point. If
I made IE cached images, IE will display those cached images.

My question is why the image didn't display and how to make this
example work under IE6.

I've tried to search topics about this question but nothing found. Any
comment/direction/references will be very helpful, thank you!

http://kitty.2y.idv.tw/~chfang/test.htm

<html>
<head>
<style>
img{border: 1px solid #ccc; margin: 5px; padding: 5px}
</style>
<script>
var url = ['http://farm3.static.flickr.com/
2076/2049894366_451d331b2d_s.jpg',
'http://farm3.static.flickr.com/2295/2049893606_46dc73fa6e_s.jpg',
'http://farm3.static.flickr.com/2211/2049892838_9d74e2f0ab_s.jpg',
'http://farm3.static.flickr.com/2069/2049106017_a13746be15_s.jpg',
'http://farm3.static.flickr.com/
2342/2049105161_9ab219365e_s.jpg'];

function show(){
var pl = document.getElementById('photolist');
var i;

pl.innerHTML = '';
for(i=0; i<=url.length-1; i++){
pl.innerHTML += '<IMG SRC=" + url + ">';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show()">show</a>
<div id="photolist"></div>
</body>
</html>
Click to expand...


Hey, I've been researching this very problem.

I can get it to work on IE7 and FF, but not IE6, and it works
partially in IE6. Seems to have something to do with the internet
options. I checked the options where you save files and as long as you
have retrieved the image previously, it seems to work. But if I delete
the previously loaded images in cache it stops working on exactly
those img's.

I've searched all over on this, I wondered if there was a work around
some where. I looked at getElementByID(), but I hold out some hope
that there is something I haven't searched yet and there might be a
solution. Is there some way to force the retrieval of an img?

Any thoughts on this?
Thanks
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align img inside nav tabs section 5
Help with code 0
IE and innerHTML problem 10
Help with Visual Lightbox: Scripts 2
Dynam. created img displays in Firefox, but not IE 2
Help with my responsive home page 2
Javascript, Firefox, InnerHTML and AJAX 6
? Trouble with: passing dragElement(e.target.id); 8

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 357

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,065
Latest member
OrderGreenAcreCBD

Latest Threads

Top