IE 6 caching IMG problem using appendChild()

M

matty

Hello,

here is an example of what is driving me totally crazy. This example
will show that the first call to "doit()" will print 30 times the image
with only one call to the server. Then I have a timeout and call doit()
again, and this time, it downloads the picture 30 times!!!! It doesn't
even time to finish downloading the pictures before the next timeout
kicks off and if I let it go for a minute or two i have like 300 calls
to download the same image trying to be downloaded!

I heard about a bug in IE that would require to preload the images
using a hidden div, but that didn't work. I see that google maps manage
to not having to reload the image and gets it from cache. What am I
doing wrong? This works perfectly in Firefox (i.e. it uses the cache
and calls the server just once).

<html>
<body>
<div id="yo">yo</div>
<script language="javascript">
var im = document.createElement('IMG');
im.src = '../common/flags/US.gif';

function test() {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(im.cloneNode());
tr.appendChild(td);
var t = document.createElement('table');
var tb = document.createElement('tbody');
tb.appendChild(tr);
t.appendChild(tb);
return t;
}
function doit() {
document.getElementById('yo').appendChild(test());
setTimeout("doit()", 3000);
}
doit();
</script>
</body>
</html>
 
R

RobG

matty said:
Hello,

here is an example of what is driving me totally crazy. This example
will show that the first call to "doit()" will print 30 times the image
Click to expand...

It adds a new table with a new image with the same src attribute every 3
seconds - does it require a wait of 90 seconds for the aberrant
behaviour to be displayed?

I can't tell what your issue it, but some comments are offered below.
with only one call to the server. Then I have a timeout and call doit()
again, and this time, it downloads the picture 30 times!!!! It doesn't
even time to finish downloading the pictures before the next timeout
kicks off and if I let it go for a minute or two i have like 300 calls
to download the same image trying to be downloaded!

I heard about a bug in IE that would require to preload the images
using a hidden div, but that didn't work. I see that google maps manage
to not having to reload the image and gets it from cache. What am I
doing wrong? This works perfectly in Firefox (i.e. it uses the cache
and calls the server just once).

<html>
<body>
<div id="yo">yo</div>
<script language="javascript">
Click to expand...

The language attribute is depreciated, type is required:

var im = document.createElement('IMG');
im.src = '../common/flags/US.gif';

function test() {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(im.cloneNode());
Click to expand...

cloneNode has a single parameter - deep - that should be set to either
true or false; Firefox (and likely other browsers) requires it. There
are no descendants of im, so either true or false will likely do:

td.appendChild(im.cloneNode(true));

tr.appendChild(td);
var t = document.createElement('table');
var tb = document.createElement('tbody');
tb.appendChild(tr);
t.appendChild(tb);
return t;
}
function doit() {
document.getElementById('yo').appendChild(test());
setTimeout("doit()", 3000);
Click to expand...

Every 3 seconds, doit() will create another table and append it to 'yo'.
 
M

matty

Sorry,

my test actually printed 30 times the table in between timeouts:

function doit() {
for (i=0;i<30;i++)
document.getElementById('yo').appendChild(test());

But I reduced it to 1 time for the example in the newsgroup. If you do
the 30 times loop you will see that the first 30 images are written on
the browser with 1 call to get the image, then 3 seconds later you see
the browser asking for the image 30 times to display 30 more tables.

I made the modifications you suggested, but it still works perfectly in
firefox and not in internet explorer ;( This makes it impossible for me
to use Ajax when pictures are involved :(
Any idea?
 
A

Anton Spaans

matty said:
Sorry,

my test actually printed 30 times the table in between timeouts:

function doit() {
for (i=0;i<30;i++)
document.getElementById('yo').appendChild(test());

But I reduced it to 1 time for the example in the newsgroup. If you do
the 30 times loop you will see that the first 30 images are written on
the browser with 1 call to get the image, then 3 seconds later you see
the browser asking for the image 30 times to display 30 more tables.

I made the modifications you suggested, but it still works perfectly in
firefox and not in internet explorer ;( This makes it impossible for me
to use Ajax when pictures are involved :(
Any idea?
Click to expand...

Put the script on the top-level-frame inside a function:
var im;
function doOnLoad()
{
im = document.createElement('IMG');
im.src = '../common/flags/US.gif';

doIt();
}

function test()
{
...
}

function doIt()
{
...
}

and call the doOnLoad function *after* the page has loaded.
Some browser don't like if you start meddling with visible elements in the
DOM before the page has initially loaded:
<body onload="doOnLoad();" >
....
</body>

Try this and see if it works.
-- Anton.
 
M

matty

Anton said:
Put the script on the top-level-frame inside a function:
var im;
function doOnLoad()
{
im = document.createElement('IMG');
im.src = '../common/flags/US.gif';

doIt();
}

function test()
{
...
}

function doIt()
{
...
}

and call the doOnLoad function *after* the page has loaded.
Some browser don't like if you start meddling with visible elements in the
DOM before the page has initially loaded:
<body onload="doOnLoad();" >
...
</body>

Try this and see if it works.
-- Anton.
Click to expand...

That made it worse.. It now downloads 30 times on the first call to
"doit()" from the onload="doit()" instead of starting that behavior on
the second call :(
 

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

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Only one table shows up with the information 2
Image shifts to the right when export the page to pdf 4
Inserting Tables in IE 6 using W3C DOM techniques. 10
How to have two html audio players on one page? 0
img object and appendChild problem 0
createElement('div') into HTML table problem in IE 6. 3
Dynam. created img displays in Firefox, but not IE 2

Members online

Total: 40 (members: 3, guests: 37)
Robots: 473

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top