Website Preloader similar to Flash w/o using Flash

Discussion in 'Web Design and Development' started by jdl8422, Sep 30, 2008.

  1. jdl8422 macrumors 6502

    jdl8422

    Joined:
    Jul 5, 2006
    Location:
    Louisiana
    #1
    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?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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=0i=new Array(); images.lengthx++) {
          
    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.
     
  3. thejadedmonkey macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
    #3
    Oh course! Anything's possible, you just have to believe it:p

    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;
     

Share This Page