Whether or not a page has been completely loaded cannot be determined by JavaScript alone, but at least it can be sufficiently estimated. The complete property of an image provides a Boolean value telling whether the image has been completely loaded. Also, an image supports the load event, so onload can be used to trigger code execution after the image has been loaded. The following code iterates through all images on the page and counts how many of them have been completely loaded. This generates an estimated percentage of how much of the page has been fully loaded. (Of course, not included are applets and embedded media; also, the image file sizes are not taken into account.) The Loading Progress Bar (loadprogress.html)
In order to actually reproduce this effect, you have to embed images in your page that take quite long to load, either because they are really large or because the server is under a heavy load. The code downloads for this book include the PHP script gfx.php that relies on PHP's GD extension and creates a randomly colored image with a time delay of up to 15 seconds. Figure 3.3 shows the result when two out of three graphics have been loaded. Figure 3.3. The third graphic is still loading.Note Other interesting events for images are abort (when the loading of the image is aborted by the user) and error (when there is an error loading the image, for instance, when the file does not exist). They can be used with the onabort and onerror event handlers.
|