...

View Full Version : Background image of duplicate, dynamically-created DIVs loading slowly; not caching



AaronW
09-06-2006, 04:39 PM
At the beginning of my script, I define an element like this, basically:



var box_element = document.createElement ('div');
box_element.className = 'box';


I wrote an onload function that sniffs out elements of a certain classname. Upon finding each one, it clones the box_element DIV, positions it to the upper left of the found element, and appends it to the body element. Now, the process of cloning, positioning, and appending the elements is done pretty much immediately in IE. The problem I'm facing is that IE loads the background image for each box (defined in the .box rule of the @imported CSS document) one by one, and slowly enough that I can watch them draw in a line down the page. It's not slowly enough that I can count them as they go, but it's slow enough to indicate that IE is actually fetching the background image each time, discarding it, then re-fetching it; it isn't caching the image.

So, does anyone know why? Or how I'd coax it into caching it? Or am I just stuck? The only reason this is a concern for me is that the background image of the element makes up the entire element. Its background colour is nothing, and the image is an icon of a pecil indicating that the element can be edited. So the effect is that of a slow-loading UI, which just won't do!

Thanks for any suggestions.

vwphillips
09-06-2006, 05:59 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--
.box {
position:absolute;
left:-1000px;
width:100px;
height:50px;
background-color:red;
background-image:url(http://www.vicsjavascripts.org.uk/StdImages/up[1].gif);
}

-->
</style>
<script language="JavaScript" type="text/javascript">
<!--

var Div;

function Add(cls){
var bdy=document.getElementsByTagName('BODY')[0];
if (!Div){
Div=document.createElement('DIV');
Div.className='box';
bdy.appendChild(Div);
}
var els=document.getElementsByTagName('*');
for (var zxc0=0;zxc0<els.length;zxc0++){
if (els[zxc0].className==cls){
var div=Div.cloneNode(true);
div.style.left=(zxcPos(els[zxc0])[0])+'px';
div.style.top=(zxcPos(els[zxc0])[1])+'px';
bdy.appendChild(div);
}
}

}

function zxcPos(zxcobj){
zxclft=zxcobj.offsetLeft;
zxctop=zxcobj.offsetTop;
while(zxcobj.offsetParent!=null){
zxcpar=zxcobj.offsetParent;
zxclft+=zxcpar.offsetLeft;
zxctop+=zxcpar.offsetTop;
zxcobj=zxcpar;
}
return [zxclft,zxctop];
}


//-->
</script></head>

<body onload="Add('fred');">
<center>
<input class="fred" name="">
<br>
<br>
<br>
<input class="fred" name="">
<br>
<br>
<br>
<input class="fred" name="">
<br>
<br>
<br>
<input class="fred" name="">
<br>
<br>
<br>
<input class="fred" name="">
<br>
<br>
<br>
<input class="fred" name="">
<br>
<br>
<br>
<input class="fred" name="">
<br>
<br>
<br>
</center>


</body>

</html>

AaronW
09-06-2006, 06:07 PM
Hrm. I've already written the script, and it works just fine. The problem is, when loading in IE, the background images load slowly, top to bottom.

Watch:

http://hours.alysondupuis.com/test.php

That's your script in action there, and it's doing the same thing. The boxes at the bottom of the page are red, and IE slowly loads the images (well, not slowly, but visibly). The thing I've written can have as many as 1000 boxes of this type shown on the screen at the same time, so in IE, this loading takes an extra ten seconds or so to load them all. The detection and cloning process is done instantly, but the background images take a while to draw themselves. Try it in Firefox, and you'll see that they appear instantly.

vwphillips
09-06-2006, 10:40 PM
hmm

worked offline

most strange, same with an image in place of background

so afraid I cant help you.

AaronW
09-07-2006, 01:58 AM
I guess I'll have to come up with a workaround for IE... Like text-only buttons. Ew.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum