Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background image of duplicate, dynamically-created DIVs loading slowly; not caching

    At the beginning of my script, I define an element like this, basically:

    Code:
    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.
    Last edited by AaronW; 09-06-2006 at 06:59 PM. Reason: Added pretty colours...

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    hmm

    worked offline

    most strange, same with an image in place of background

    so afraid I cant help you.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess I'll have to come up with a workaround for IE... Like text-only buttons. Ew.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •