Understanding Preloading For Web Components

We heard preloading almost every time! But do you really understand what is preloading and how does preloading actually work? In this article, we will talk about preloading and how it should and can be use.

What is Preloading

Most of us will know but there are many that are unclear. Preloading is an action that will load components which are not visible available to the users. This means that any component that are already in the HTML document will be loaded and preloading doesn't help speeding up these components. What we would like to preload are those components that do not resist within the document and components for future pages.

Why Preload component

Why do we want to preload a component if it doesn't help speeding up the existing components on the HTML document?! Simple, let's say we have a gallery which has the following code in our document

<img src='example.jpg'/>

compare to document that has these codes

<img src='example.jpg'/>
<img src='example1.jpg'/>
<img src='example2.jpg'/>
<img src='example3.jpg'/>
<img src='example4.jpg'/>
<img src='example5.jpg'/>
<img src='example6.jpg'/>

Assuming each image in these example are 800kb in size (If you have a script that wait for an onload event to occurs, i wonder when will the script start running). It will be obvious which one will finish first (the first example). So your user gets to see the result like less than 1 minute. The sub sequence images will be preload into the document while the user is still viewing the first one. Thus, clicking the next button will show a loading in progress or immediately displayed the second image depending on how you construct your script to accomplish this.

Although we didn't speed up the image loading time but we manage to speed up the overall waiting time for the whole page to be display completely. Thus, preloading allows us to practice 'load only when needed' concept. This means that those that are not going to display first should be loaded last and allow the page to be fully loaded before their turn is up to run.

If you have very big file size page, it will serve as a notification to the users that the site is loading. On the other hand, preloading allows you to cache them onto the user browser for better responsiveness. (although there are disadvantages of doing this too) This way, sub sequence pages will have better 'speed'.

What component can be preloaded?

Basically you will want these components to be preloaded first since they usually take up the most loading time.

Images files
Flash files
Sound files

There are not much reason to preload other type of document unless they are very big in size. Most document are small enough to load within a few seconds but the one mention above are usually the one we are concern with during web development.

What are the methods for preloading

This depend on which components are you trying to preload. There are all sort of ways to preload certain components such as JavaScript, ActionScript, CSS, Ajax or HTML tag. So depend on which one are you trying to preload and what are you trying to accomplish. Flash files will most likely be ActionScript. For Images, people tend to use CSS, JavaScript for caching and Ajax for preloading with loading image. While sound files will be using embed tag.

How Preloading work

In a way, preloading can be describe as work behind the scene. Basically, the user will not be able to notice. But different way of preloading work differently,

CSS

In CSS, the objective is to hide those component you want to preload. And you might want it to be placed at the last row in your HTML document (means it will load only all relevant component has loaded). Methods used are usually,

Visibility: hidden
display: none
width:0px;height:0px;
top: -99999px; or left: -999999px

The objective is to hide it so that it will store in the cache.

JavaScript

In JavaScript, we used the image object. (this method can also be used to preload flash files into the cache)

var obj = new Image();
obj.src = 'test.jpg';

This way it will preload the images for sub sequence pages as the images are cached. This method can also be used to produce loading image before applying the following code

document.getElementById('container').innerHTML = '<img src='test.jpg/>';

Ajax

Ajax let the server script to load the image page, cached and send it back to the document for display.

function preload(url) {
  // display loading image
  // send the url to be open on the server side. hence, cached.
  document.getElementById('loading').style.visibility = 'visible';
  document.getElementById('container').innerHTML = '';
  var obj =  new XMLHttpRequest();
  obj.open('GET', url, true);

  obj.onreadystatechange = function() {		
    if (obj.readyState == 4 && obj.status == 200) {
      // once cached, we hide the loading image and display the content
      if (obj.responseText) {
        document.getElementById('container').innerHTML = '<img src=''+url+''/>';
        document.getElementById('loading').style.visibility = 'hidden';
      }
    }
  };
  obj.send(null);
}

During the request, we can display a loading in progress image until the new image has loaded. However, this doesn't seems to work on IE 7. (this is shown later on demo section)

HTML tag

This is usually used for sound files.

<EMBED NAME='mySound' SRC='mySound.mid' 
LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

Action Script

If you are interested, here is a video.

The Demonstration

i will demonstrate using Ajax which the code has been written above. Please click the image to see the loading. Here are the files and demo