Announcement

Collapse
No announcement yet.

preloading images

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • preloading images

    Hi y'all.

    I don't normally care to preload images. I've just put up a splash page for a new company that uses a lot of animaged gifs that need to fire in the correct sequence so I'm looking for a good solution.

    From what I've read, the standard javascript preload functions only guarantee that image loading has started before a page tries to render. I need to ensure that image loading is complete because of the way these gifs render.

    I've tried the standard preload functions on the splash page and you can tell that the images are not fully loaded when it starts to draw the page.

    Using gifs is only temporary, we're going to change the splash page to flash soon, but I'd like to get the gif version working as intended for now.

    You can see the page here: http://www.giftwit.com

    Any ideas?

    Hey Mods/Admin, how about a forum for programmers?
    P.S. You've been Spanked!

  • #2
    What, we ain't got enough nerds around here?
    Join MURCs Distributed Computing effort for Rosetta@Home and help fight Alzheimers, Cancer, Mad Cow disease and rising oil prices.
    [...]the pervading principle and abiding test of good breeding is the requirement of a substantial and patent waste of time. - Veblen

    Comment


    • #3
      Maybe you could load them, and meta-refresh the page to get them synchronized.
      Gigabyte P35-DS3L with a Q6600, 2GB Kingston HyperX (after *3* bad pairs of Crucial Ballistix 1066), Galaxy 8800GT 512MB, SB X-Fi, some drives, and a Dell 2005fpw. Running WinXP.

      Comment


      • #4
        When you say standard refresh technique do you mean adding the images to the page and setting the size to 1*1 pixels?

        Generally considered the easiest way of doing it.

        Comment


        • #5
          Originally posted by dbdg
          When you say standard refresh technique do you mean adding the images to the page and setting the size to 1*1 pixels?

          Generally considered the easiest way of doing it.
          That's if you want to preload them for ultimate display on other pages.

          I'm talking about javascript that loads the images as objects. I think the browser is supposed to stop rendering the html until the javascript is done. It doesn't work as expected.
          P.S. You've been Spanked!

          Comment


          • #6
            You shold check out the onload event handler of the Image object in Javascript.

            Comment


            • #7
              Is there something there or are you just speculating?

              I've seen sites, I think they were news sites, with lots of images, that would load all at once, not show the text first and then draw the images.

              How do they do it?
              P.S. You've been Spanked!

              Comment


              • #8
                Sorry to ask, but why not do it in flash? Should even lead to a smaller file size (besides the fact that teasers suck )

                Sorry, can't help you - but maybe you could preload them, set them to display:none, and when they are finished loading, set them to display:visible (or whatever these CSS options are called).

                AZ
                There's an Opera in my macbook.

                Comment


                • #9
                  Just speculating... ? baaah.
                  Dunno why I had to use the PHP tags. Thought it was supposed to work with CODE. Please ask if you need more comments.
                  Here you go:

                  PHP Code:
                  <html>
                  <
                  head>
                  <
                  script language="Javascript">
                      var 
                  img_array = new Array();
                      var 
                  loader_array = new Array();
                      var 
                  imgDone_counter 0;

                      function 
                  pollState() {
                          if (
                  imgDone_counter >= loader_array.length) { 
                              
                  document.location.replace("http://www.giftwit.com/");
                              return;
                          }
                          for (
                  0loader_array.lengthi++) {
                              if (!
                  loader_array[i][1] && loader_array[i][0].complete) {
                                  
                  loader_array[i][1] = true;
                                  
                  imgDone_counter++;
                              }
                          }
                          
                  setTimeout("pollState()",10); 
                      }
                              
                      
                  img_array[0] = "http://www.giftwit.com/images/teaser/logo_1x1.gif";
                      
                  img_array[1] = "http://www.giftwit.com/images/teaser/logo_1x2.gif";
                      
                  img_array[2] = "http://www.giftwit.com/images/teaser/logo_1x3.gif";
                      
                  img_array[3] = "http://www.giftwit.com/images/teaser/logo_2x1.gif";
                      
                  img_array[4] = "http://www.giftwit.com/images/teaser/logo_2x2.gif";        
                      
                  img_array[5] = "http://www.giftwit.com/images/teaser/logo_2x3.gif";
                      
                  img_array[6] = "http://www.giftwit.com/images/teaser/logo_3x1.gif";
                      
                  img_array[7] = "http://www.giftwit.com/images/teaser/logo_3x2.gif";
                      
                  img_array[8] = "http://www.giftwit.com/images/teaser/logo_3x3.gif";
                      
                  img_array[9] = "http://www.giftwit.com/images/teaser/logo_4x1.gif";
                      
                  img_array[10] = "http://www.giftwit.com/images/teaser/logo_5x1.gif";
                      
                  img_array[11] = "http://www.giftwit.com/images/teaser/logo_5x2.gif";
                      
                  img_array[12] = "http://www.giftwit.com/images/teaser/teaser.gif";
                          

                      
                  // start loading
                      
                  for (0img_array.lengthi++) { 
                          
                  loader_array[i] = new Array(new Image(), false);
                          
                  loader_array[i][0].src img_array[i];
                          
                  loader_array[i][1] = false;
                      }
                      
                      
                  document.write("<center>Please wait loading...</center>");
                      
                      
                  pollState()

                  </
                  script>
                  </
                  head>
                  </
                  html
                  Last edited by jms; 19 January 2005, 13:29.

                  Comment


                  • #10
                    @az, the gifs are only temporary, flash is coming.

                    @jms, thanks very much for your code. I tried it out and it seemed to work on my dev machine but after I copied it to the site the page goes into an infinite refresh loop. I put a copy of the page with the code applied to the site at giftwit.com/test.htm. Can you take a look and tell me what I'm doing wrong?

                    My guess is that one of the images will not load and is causing the completion check to constantly fail, but I looked at the code and didn't see the mistake. Maybe it's something else.

                    Thanks again.
                    P.S. You've been Spanked!

                    Comment


                    • #11
                      You need to save my code in a separate HTML file and not in the head section of your original file. I would have renamed your original index.html file to index2.html or something. You would then also have to change the line document.location.replace("http://www.giftwit.com/"); to document.location.replace("http://www.giftwit.com/index2.html");
                      in my code.

                      You should also change the document.write line at the bottom to something more appropriate. If your not familiar with scripting, just remove this document.write line and add a body tag under the head section in my code. here you place what you want the user to see while your other page loads( a very small loading animation?).
                      Last edited by jms; 20 January 2005, 01:52.

                      Comment


                      • #12
                        I get it. I'll give it a shot.
                        P.S. You've been Spanked!

                        Comment


                        • #13
                          Sweet!
                          P.S. You've been Spanked!

                          Comment

                          Working...
                          X