Brian Cryer's Web Resources

How to dynamically load any html file component

When a browser loads a page it normally displays the components of that page as they are downloaded. (Although there is some variation of behaviour between browsers.) Thus typically text appears before images (because images take longer to download) and images earlier in the file will appear before images later in the file (because the download of those images will have started earlier).

The contents of this article have been tested with:
  • Internet Explorer 5.5, 6, 7, 8 , 9
  • Mozilla 1.0, 1.7.2, Firefox 2, 3
  • Opera 9
  • Netscape 6.2, 7.2
  • Mac OS X IE 5.2.2 and Safari beta - thanks to J Bradley for reporting this.

There are a number of different techniques that can be used to dynamically load components. This page includes a number of different techniques for controlling the loading of html file components:

See also 'How to change the load order of images'.

These techniques can be used to delay the loading of images or other slow to download files until after the bulk of the html file had been processed or could be used to dynamically generate the file contents.

Changing HTML using DIV

The HTML contained within a set of <DIV> tags can be dynamically changed.

For example:

<div id="DivExample">
Hello World

all the HTML enclosed between the <DIV> and </DIV> can be replaced dynamically using the Javascript:

<script type="text/javascript">
document.getElementById('DivExample').innerHTML="Good Afternoon";

In this way it can be changed to any valid html combination. The following three buttons demonstrate changing this:


Please click a button

Javascript: document.getElementById('DivExample').innerHTML = "<p>Hello</p>";
Javascript: document.getElementById('DivExample').innerHTML = "<p>Good Afternoon</p>";
Javascript: document.getElementById('DivExample').innerHTML = "<img src=number0.gif></img>";


  1. Some other tags can be used in place of <DIV>. The most useful of which is possibly a table cell (<td> or <th>) or a <span> which can be assigned an ID and have its innerHTML updated.
  2. The example above use buttons, but there is no reason why links cannot be used. This is an example, for which the HTML is:

    <a href="#self" onclick="document.getElementById('DivExample').innerHTML = '<p>You clicked on a link</p>';">This is an example</a>

Loading other files using IFRAME

Inline frames (<IFRAME>) provides another way of dynamically controlling what is loaded and displayed. An inline frame allows another file to be displayed at that point. The main disadvantages of using inline frames is that not all browsers support them (particularly older browser versions). Also the size of the frame must be specified, it will not dynamically resize to suit its contents.

The HTML to include an inline frame is simply:

<iframe name="IFrameName"></iframe>

Any html between the <iframe> and </iframe> will be visible if the browser does not support inline frames. The <iframe> takes a number of other parameters, such as:

frameborder yes or no Whether the inline frame should have a border.
height number or percentage The height of the frame in pixels or as a percentage of the available height.
scrolling yes, no or auto Whether scroll bars are provided. The default is auto.
src file name The name of the html file to include an display at that point.
width number or percentage The width of the frame in pixels or as a percentage of the available width.

It is the 'src' parameter that is of interest here. To change it dynamically either:


Note, the alternative:


works with Internet Explorer but not with Netscape (version 6).

Example (using frameborder="no" width="100%" height="100" scrolling="no"):

This frame is initially blank, because it has been assigned no content. Click on either of the following buttons to dynamically change it.

Javascript: document.all.IFrameName.src='http://emily.cryer.org.uk'
Javascript: document.all.IFrameName.src='http://www.cryer.co.uk/brian/'

Whether or not scroll bars are displayed varies according to the setting for 'scroling' (which in this example set off) and the size of the image.

Combination of DIV and IFRAME

Because the <DIV> tag allows all of the HTML contained within the tag to be replaced, it is therefore possible to replace the content with an inline-frame.


Please click a button:

Javascript: document.getElementById('DivExample').innerHTML = "<p>Hello</p>";
Javascript: document.getElementById('DivExample').innerHTML = "<image src=number0.gif></img>";
Javascript: document.getElementById('DivExample').innerHTML = "<iframe src='http://emily.cryer.org.uk/'></iframe>";