odd problem about innerHTML & img under IE
chu...@gmail.com
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[i] + ">'; ), 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[i] + ">';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show()">show</a>
<div id="photolist"></div>
</body>
</html>
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[i] + ">'; ), it works fine under
> FF but under IE6, no images displayed at all.
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
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>
<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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>
VK
FAQ 4.31 update suggested
On Nov 30, 11:42 pm, chun...@gmail.com wrote:
> 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[i] + ">'; ), it works fine under
> FF but under IE6, no images displayed at all.
"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[i];
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"> </div>
</body>
</html>
Thomas 'PointedEars' Lahn
> <FAQENTRY>
> FAQ 4.31 update suggested
[x] nay
> On Nov 30, 11:42 pm, chun...@gmail.com wrote:
>> 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[i] + ">'; ), it works fine under
>> FF but under IE6, no images displayed at all.
>
> "Bingo!", I guess: [...]
Again, and unsurprisingly, you guessed wrong. The images are broken in
Firefox, too.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
Richard Cornford
<snip>
> ... , 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>
<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.
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[i] + ">'; ), 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>
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.
Doug Gunnoe
> img id = document.getElementById(yourIMGid);
> id.src = "path to the image";
Except don't use the above as written. :|
imgID = document.getElementById(yourIMGid);
imgID.src = "path to the image";
Randy Webb
<snip>
> 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?
Very good advice.
> Something like this..
>
> img id = document.getElementById(yourIMGid);
imgRef = document.images[yourIMGName];
And then, you aren't relying on the catch-all crutch of getElementById.
At least with the images collection, if it isn't undefined, you can
pretty much be assured it is in fact an img element, that is not true
with gEBI.
> id.src = "path to the image";
imgRef.src = "path to the image";
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Randy Webb
> <FAQENTRY>
> FAQ 4.31 update suggested
When you come up with something to update it with that has anything to
do with the entry, I will entertain it again. As for this post, forget
it as nothing you say or post in this post has anything at all to do
with the FAQ Entry you are referring to.
> On Nov 30, 11:42 pm, chun...@gmail.com wrote:
>> 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[i] + ">'; ), it works fine under
>> FF but under IE6, no images displayed at all.
>
> "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?"
Nothing you wrote in this thread, other than that above, has anything to
do with "rollovers".
> This page (HTML 4.01 Strict btw) demonstrates the problem pretty
> clearly if anyone has IE6 available.
Where in that code is there anything that creates a rollover effect?
There isn't.
> 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).
That's dynamically creating an image, not attempting to perform a
rollover image change.
> Only that one image gets displayed. Others remain blank placeholders
> until one right-clicks on them and chooses "Show Picture".
Try changing your link to a button, or, remove the javascript: kiddie
code from it and re-test it.
> Clearly and explicitly "cache attack" protection I was talking about,
> nothing to do with any speacial/broken content headers.
Only in *your* mind VK, only in *your* mind.
<snipped nothing having to do with the problem>
> <div><a href="javascript:void(0)" onclick="show()">show</a></div>
<button onclick="show()">Test It</button>
And try again. Then, try reading Richard's reply about why the
javascript: kiddie code is part of the problem.
Just so you will know, or at least I can say I tried to explain it to
you, and for anybody else that happens to stumble onto this thread so
that they don't fall victim to your thinking. The issue that is
addressed in the FAQ is simple. Take this code:
<img src="originalImage.jpg"
onmouseover="twoMegabyteImage.jpg"
onmouseout="originalImage.jpg"
......
>
The first time you mouseover that image, you will have to stay there
long enough for the image to download before the browser can display it.
That leads to the question "Why are my rollovers so slow?" which lead to
code like this(commonly called preloading code):
var someImage = new Image();
someImage.src = "twoMegabyteImage.jpg";
In the hopes that the browser would go ahead and download the image so
that when you moused over the image in the page then the "rollover
effect" would be quicker and not "so slow".
The second effect is when you mouseout of the image, and it reverts back
to the original, if the twoMegabyteImage file isn't kept in the cache by
the browser, you are right back where you started and waiting on the
image to download. That lead to the "solution" in the FAQ. Which doesn't
even come close to addressing the first issue.
Now, could you please try to explain how your code has *anything* to do
with either of those two issues where they concern image rollovers?
chu...@gmail.com
wrote:
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
Randy Webb
<snip>
> Thank you Richard. You solved my question! I simply remove the
> javascript:void(0) and everything works as expected.
Don't let VK know, he still thinks it is some kind of mysterious figment
of his/her imagination.
Thomas 'PointedEars' Lahn
> Also, I would preload the images.
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.
gilma...@gmail.com
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
Randy Webb
<snip>
>> </html>
>
> Hey, I've been researching this very problem.
Too bad you didn't read the entire thread. You wouldn't have had to
research any more, it is explained (quite well) what the problem is and
how to correct it.
> 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.
Nope. Has to do with the javascript: pseudo-protocol. Read Richard's
reply in this thread.
> 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.
Has nothing to do with it.
> 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?
"Force the retrieval of an img"? Sure, add a queryString to the img
path. Search the archives.
> Any thoughts on this?
Yes. Try reading this entire thread.