Chapter 24. HTML Tips and Tricks

IN THIS CHAPTER

  • Preloading images

  • Controlling text breaks in table cells

  • Stretching title bars

  • Simulating newspaper columns

  • Including image sizes for fast display

  • Protecting e-mail addresses

Throughout this book, you have read about the ins and outs of the various HTML tags and entities. This chapter covers a few tips and tricks you can use to supplement your HTML knowledge to achieve real-world results.

Preloading Images

One of the things that can really slow down the display of Web pages is an abundance of images, each one of which can contain the equivalent of 17,000 to 20,000 characters.

A trick that was developed to help overcome the delays experienced while image-rich documents load is image preloading. Through the use of JavaScript, image files are loaded into image objects. The net result is that the graphics are not displayed but are loaded into the browser's cache for later use. When it is time for the browser to actually display the image(s), they are taken from the local cache instead of having to make the trip across the Internet.

The script embedded in the following document is an example of a preload script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Preloading Images</title>
  <script type="text/JavaScript">
  // Assign path of images to be preloaded to
  //   array, one image per index
  var imagenames = [];
  imagenames[0]  = "images/header.gif";
imagenames[1] = "images/logo.jpg"; imagenames[2] ...

Get HTML, XHTML, and CSS Bible, Fourth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial