Website Preloader similar to Flash w/o using Flash

My first thought is to have a div that's CSS is set as:

Code:

div {
 display: none;
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 100%;
 background-color: #fff;
 opacity: .2;
 filter: alpha(opacity=20); /*for ie*/
}

You would then use JavaScript to change the display property to 'block' at the very start. If you set it to block from the get-go you will lock out visitors who have JavaScript disabled. You would then set up a function call after the image preloading is done to set the display back to none. The exact implementation of this will depend on your exact setup. Knowing when all images are preloaded is a touch tricky, but doable. I did it for a recent script. Below is some chunks with some minor tweaks that you should be able to decipher enough to make use of. If not, let me know.

PHP:

    /* Image Preloader */
    /* images is an array with image paths */
    for (var x=0, i=new Array(); x < images.length; x++) {
      i[x] = new Image(); i[x].src = images[x];
      offsets[x] = 0;
      i[x].onload = function(){ Totaler(this); };
    }
...
  Totaler = function(i) {
    v['wAll'] += i.width;
    if (++v['count'] >= images.length) {
      PreloadScreenBeGone();
    }
  };

An alternative to gray screen is to disable the clicking until all the preloading is done. Functionally equivalent, but experience is different. I'm assuming you know a bit of JavaScript so I'm not providing all of the details here. If you need some clarity though, on what I'm suggesting, just let me know.

 

Oh course! Anything's possible, you just have to believe it

Seriously...

What you want to do is make a DIV that fills the whole screen with transparency and some cheesy icon to visually let the user know that it's loading.

Then just use javascript onLoad to have it set the DIV to visibility:hidden;