Figure 9-11. DHTML news flipper at WebReference.com
One early example of progressive enhancement (PE) was WebReference.com’s News Harvester Perl/DHTML news flipper.
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).
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.