spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column27
Developer News
Eclipse Helios Update Brings New PHP Tools
Internet Explorer 9 Ups Standards Support
JBoss Portal 5 Release Easier to Use

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

webref The latest from WebReference.com Browse >
Flashmaps' DynamicLocator: Interactive Maps for Small Areas · Flashmaps' AreaSelector: Interactive Maps for Wide Areas · The DB Mapper: Interactive Street-level Maps of U.S. and Canada
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters > 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

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

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