Call (877) SITE-OPT (748-3678)

Figure 9-11. DHTML news flipper at WebReference.com

Chapter 9 - Advanced Web Performance Optimization

One early example of progressive enhancement (PE) was WebReference.comís News Harvester Perl/DHTML news flipper.

News Harvester: Overlaying static HTML with DHTML

The simplest method of delaying the loading of external JavaScript is to place the script at the end of your body element, and provide empty stub functions in the head to avoid script errors. This technique requires that core HTML functionality be present upon page load, and that enhanced functionality be layered on top after the script loads. We used this technique for our Perl/DHTML news flipper at WebReference.com (see Figure 9-11).

dhtml news flipper webreference.com

Figure 9-11. DHTML news flipper at WebReference.com

First we used a Perl script to grab an XML feed, and then we inserted two or three headlines as an HTML include. These headlines displayed even with JavaScript turned off. We then overlaid a DHTML news flipper on top to replace the headlines. Once the core feature was in place, we created empty stub functions to avoid JavaScript errors if users had rolled over the element (to stop the flipping) before the JavaScript loaded:

<script type="text/javascript">
function newsflipper( ){};
</script></head>

At the end of our body tag, we redefined the DHTML news flipper function like so (delayed load):

<script src="/scripts/newsflipper.js"></script>
</body>

Empty stub functions allow users to interact with the page without generating "undefined" JavaScript errors.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In