DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.0 | 11

Dynamic Headline Fader, Version 2.0
fader load overhead

The first part of our script declares a few global variables:

finite = (maxLoops > 0);
isOver = false;
loadCount = 0;
if (!window.prefix) prefix = "";

The finite variable, also used in Version 1, is true if the value of maxLoops is greater than 0. That is, if a specific number of fader loops was set by the author. We need finite to help determine the end of the fader loops.

A new variable, isOver, replaces the old isMouseOver and will be used to track the user's mouse position in relation to the fader. It will be set to true if the mouse is over the fader and false when it is not. isOver will help update the browser status bar when the mouse is over the fader while text changes.

Another new variable, loadCount, will be used by Navigator. Authors who used Version 1 noticed that on slower systems, the fader GIF did not load fast enough. Consequently, users saw the image placeholder icon through the initial item transitions. Version 2 will not start the fader until both the GIF and the HTML page have loaded. loadCount tracks the load event of the window and the image.

In case the prefix variable is missing from the array file, we create one here and assign it an empty string.

Tracking Load Events

We first assign a new function, countLoads(), to the window onload event handler:

window.onload = countLoads;

Next, for Navigator only, we preload and cache the fade GIF, also calling countLoads() when the image has loaded:

if (NS4) {
   fadeImg = new Image();
   fadeImg.onload = countLoads;
   fadeImg.src = gifSrc;
}

Therefore, in the case of IE, countLoads() is called once, when the page has loaded. For NS users, countLoads() is called twice, once when the page loads and once when the image loads. The countLoads() function looks like this:

function countLoads() {
   if (IE4) {
      setTimeout("initIt()");
   }
   else {
      loadCount++;
      if (loadCount==2) {
         origWidth = innerWidth;
         origHeight = innerHeight;
         window.onresize = function(){
            if (innerWidth==origWidth && innerHeight==origHeight) return;
            location.reload();
         }
         initIt();
      }
   }
}

For IE, if the page has loaded, there is nothing else to wait for, so we call our fader initialization function initIt(), immediately. Well, almost immediately. As you know, Explorer stops to refresh the display only if it is idle. While a script is executing, no refresh is possible. Many users complain about pages that use onload handlers to run complicated scripts. In many cases, they don't see the page until the script has finished executing, especially if the page contains tables. We therefore provide an idle time for Explorer, the smallest possible actually, by using a setTimeout() without a time interval argument. Explorer will now display the page then execute initIt().

For NS, countLoads() lives up to its name by actually counting the loads. The loadCount variable is incremented with each call. When it is 2, it means both the page and image have loaded and we are ready to proceed. So, we first set the resize handler for the window, to ensure that we don't lose the fader when the user resizes the window. See DHTML Diner for a discussion of this technique. Then we call initIt(). Navigator refreshes the screen while a script is running so we don't need the setTimeout() workaround.

The complete initial part of our external script, therefore, looks like this:

finite = (maxLoops > 0);
isOver = false;
loadCount = 0;
if (!window.prefix) prefix = "";
window.onload = countLoads;
if (NS4) {
   fadeImg = new Image();
   fadeImg.onload = countLoads;
   fadeImg.src = gifSrc;
}
function countLoads() {
   if (IE4) {
      setTimeout("initIt()");
   }
   else {
      loadCount++;
      if (loadCount==2) {
         origWidth = innerWidth;
         origHeight = innerHeight;
         window.onresize = function(){
            if (innerWidth==origWidth && innerHeight==origHeight) return;
            location.reload();
         }
         initIt();
      }
   }
}

Let's move on to the fader initialization.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Sep 07, 1999
Revised: Sep 07, 1999

URL: https://www.webreference.com/dhtml/column25/fade2onload.html