DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 19 | WebReference

DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 3.0 | 19

Logo

Dynamic Headline Fader, Version 3.0
accounting for image error in NS


Handling the Error

We have tried to make the Fader script work under any circumstances. Some we have already foreseen and have included in Versions 2+. One contingency that we have yet to account for is the possibility of the fade-workaround GIF not loading in Navigator. This may happen if:

  1. The image file does not exist on the server
  2. The image file does exist, but the FDRgifSrc doesn't point to it (ex. typo)
  3. The image file is damaged
  4. Image loading is disabled in user's preferences
  5. A network glitch occurs while the image is being downloaded

Presently, our script will not kick in unless the image has loaded. However, the behavior should be:

If a fade is called for and the image does not load, forget about fading and switch to flipping.

Let's revisit the NS-only code, in the beginning of our script, that loads the image. Presently, it looks like this:

if (NS4) {
    if(FDRjustFlip) {
        totalLoads = 1;
    }
    else {
        totalLoads = 2;
        FDRfadeImg = new Image();
        FDRfadeImg.onload = FDRcountLoads;
        FDRfadeImg.src = FDRgifSrc;
    }
}

We'll give the new Image object an onerror event handler, which will fire if the image does not load. Like the onload handler, it too calls FDRcountLoads():

if (NS4) {
    if(FDRjustFlip) {
        totalLoads = 1;
    }
    else {
        totalLoads = 2;
        FDRfadeImg = new Image();
        FDRfadeImg.onload = FDRcountLoads;
        FDRfadeImg.onerror = FDRcountLoads;
        FDRfadeImg.src = FDRgifSrc;
    }
}

Switch to Flipping

So, whether the image loads or not, a call to FDRcountLoads() is made. However, in FDRcountLoads(), we need to distinguish between the two events. We therefore give FDRcountLoads() a single argument, the implicitely-passed event object, which, following the NS-standard, we name e.

function FDRcountLoads(e) { // event argument
  if (IE4) {
    setTimeout("FDRinit()",1);
  }
  else {
    if(e.type == "error") FDRjustFlip = true;
    FDRloadCount++;
    if (FDRloadCount==totalLoads) {
      origWidth = innerWidth;
      origHeight = innerHeight;
      window.onresize = function(){
        if (innerWidth==origWidth && innerHeight==origHeight)
           return;
        location.reload();
      }
      FDRinit();
    }
  }
}

The Navigator-specific part of the function checks the event type. If it is an error event, the FDRjustFlip parameter variable is forced to true, enabling flipping, and FDRloadCount is incremented as usual.

Now, the script will continue as if the author had originally given FDRjustFlip a value of true.

This a very elegant method for ensuring Fader functionality, since all Navigator versions support the documented and very useful onerror handler for the Image object, right?


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov 30, 1999
Revised: Nov 30, 1999

URL: http://www.webreference.com/dhtml/column27/fade3onerror.html