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:

Changing HTML using DIV
Loading other files using IFRAME
Combination of DIV and IFRAME

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
</div>

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";
</script>

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

Note:

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.
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:

frames['IFrameName'].location.href='http://emily.cryer.org.uk'

Note, the alternative:

document.all.IFrameName.src='http://emily.cryer.org.uk'

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

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.