November 25, 2002
I load. You load. We preload with onload.
Ever on the prowl for gracefully degrading web design efficiencies, I came up with a slick way to avoid having to worry about updating page-centric image preloading code every time we changed one component on a page. Normally I would preload every single rollover image on the page using an onload attribute in the <body> tag. This is fine for elements such as navigational graphics and other things that stay the same for months on end, but for elements that change much more frequently, I started using an onload attribute in the <img> tag of the rollover element itself. Here’s an example:
<img src="/image.gif" onload="javascript:if(document.images){n_img=newImage('/over.gif')};" id="img01" alt="Nice image, what?" width="32" height="32" border="0">
The nice thing about doing things this way is that the image, its rollover code, and the preloader script all travel together in the same text snippet and I can include it on different pages throughout the site without having to update the JavaScript on each page. I’m sure there are plenty of technical reasons for not doing it this way, and I won’t be offended should you care to elucidate. For starters, it sure as heck ain’t going to validate any time soon… The upside is that it hasn’t caused any flaming browser mishaps yet. [ Update ] Toby mentioned that I don’t really need to include the javascript: pseudo-protocol in the onload handler since I’m not attempting to mimick a URL. Here’s the updated version:
<img src="/image.gif" onload="if(document.images){n_img=newImage('/over.gif')};" id="img01" alt="Nice image, what?" width="32" height="32" border="0">
Simple, no? More details on why you probably shouldn’t be using the pseudo-protocol anyway can be absorbed over at Jibbering.com
This item was posted by .
Categories:
Leave a comment or send a trackback from your own site.