Website Preloader similar to Flash w/o using Flash

[jdl8422]

I have a website that is built in HTML/CSS and relies on javascript for alot of its function. The main content is on a javascript slider. There are a number of roll overs or onClick functions. I want the user to wait for the images to preload. It doesnt take an obnoxious amount of time, but if you start clicking the second it pops up the photos may not be loaded. I have some javascript that preloads the images, but what I want to accomplish is a page preloader similar to a flash site. I would like to have the screen grey out and then a preloader animation. Is this possible with javascript?

 

[angelwatt]

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

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.

    /* 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.

 

[thejadedmonkey]

Is this possible with javascript?

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;