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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    UK
    Posts
    177
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Precache images for use with innerHTML

    When setting the content of a div with innerHTML in IE, any images are downloaded at that moment in time and this shows their URL loading on the status bar. Also, all the images disappear and then reappear and this is very noticeable.

    There are 12 images and I'm setting the div HTML dynamically with innerHTML, so is there a way to precache these 12 images so that they aren't all re-downloaded again?

    I've tried placing the 12 images outside the div within another div that has a height of 0 and overflow: hidden set, but it still happens in IE.

    Stu
    if ($ENV{'QUERY_STRING'} eq "Afrow UK") {
    print "$ENV{'QUERY_STRING'} rocks!";
    } else {
    print qq~$ENV{'QUERY_STRING'} sucks :)~;
    }

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    check out this post:

    http://www.codingforums.com/showthre...690#post506690


    it only sets one image, but you can set multiple images.


    pics[0]
    pics[1]
    pics[2]

    ect......
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Location
    UK
    Posts
    177
    Thanks
    0
    Thanked 2 Times in 2 Posts
    This is what I tried originally and I've tried it again but put the code in the <head> but it still does not work:
    Code:
     <script type="text/javascript">
     <!--
     //<[[
    
      // Session settings.
      var session_id = 4;
      var user_name  = "SAS^Afrow UK";
    
      // Precache smilies.
      smilies = new Array();
      smilies[0] = new Image(15, 15);
      smilies[0].src = 'gfx/smilies/9.gif';
      smilies[1] = new Image(15, 15);
      smilies[1].src = 'gfx/smilies/10.gif';
      smilies[2] = new Image(15, 15);
      smilies[2].src = 'gfx/smilies/11.gif';
      smilies[3] = new Image(15, 20);
      smilies[3].src = 'gfx/smilies/12.gif';
      smilies[4] = new Image(19, 22);
      smilies[4].src = 'gfx/smilies/13.gif';
      smilies[5] = new Image(15, 15);
      smilies[5].src = 'gfx/smilies/1.gif';
      smilies[6] = new Image(15, 15);
      smilies[6].src = 'gfx/smilies/2.gif';
      smilies[7] = new Image(15, 15);
      smilies[7].src = 'gfx/smilies/3.gif';
      smilies[8] = new Image(15, 15);
      smilies[8].src = 'gfx/smilies/4.gif';
      smilies[9] = new Image(15, 15);
      smilies[9].src = 'gfx/smilies/5.gif';
      smilies[10] = new Image(15, 15);
      smilies[10].src = 'gfx/smilies/6.gif';
      smilies[11] = new Image(15, 15);
      smilies[11].src = 'gfx/smilies/7.gif';
      smilies[12] = new Image(15, 15);
      smilies[12].src = 'gfx/smilies/8.gif';
    
     //]]>
     //-->
     </script>
    All the smilies still flash when the HTML is re-written with innerHTML.
    I was wondering, is it possible to document.write within a div?

    Stu
    if ($ENV{'QUERY_STRING'} eq "Afrow UK") {
    print "$ENV{'QUERY_STRING'} rocks!";
    } else {
    print qq~$ENV{'QUERY_STRING'} sucks :)~;
    }

  • #4
    Regular Coder
    Join Date
    Dec 2002
    Location
    UK
    Posts
    177
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I've made progress with this. Instead of setting the entire HTML with innerHTML for an element, I just add a new element with appendChild().
    So now only the newly added image is downloaded rather than all of them, but the image pre-caching is still not doing anything. It seems that IE wants to download a new copy anyway

    Stu
    if ($ENV{'QUERY_STRING'} eq "Afrow UK") {
    print "$ENV{'QUERY_STRING'} rocks!";
    } else {
    print qq~$ENV{'QUERY_STRING'} sucks :)~;
    }


  •  

    Posting Permissions

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