preloading images

**Umfriend** · 17 January 2005, 01:09

What, we ain't got enough nerds around here?

**Wombat** · 17 January 2005, 01:16

Maybe you could load them, and meta-refresh the page to get them synchronized.

**dbdg** · 17 January 2005, 02:05

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.

**schmosef** · 18 January 2005, 23:17

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.

**jms** · 19 January 2005, 11:07

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

**schmosef** · 19 January 2005, 11:13

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?

az · 19 January 2005, 11:27

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

**jms** · 19 January 2005, 13:26

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 (i = 0; i < loader_array.length; i++) {
            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 (i = 0; i < img_array.length; i++) { 
        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>

**schmosef** · 19 January 2005, 16:42

@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.

**jms** · 20 January 2005, 01:06

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?).

**schmosef** · 20 January 2005, 07:58

I get it. I'll give it a shot.

**schmosef** · 20 January 2005, 13:15

Sweet!

preloading images

preloading images

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment