Downloading Long HTML Pages with ACP - The Example with ACP
(Page 2 of 4 )
For simplicity, consider a case where the page is three screens long. The length of a screen varies from client computer to client computer; for your project, just estimate the longest and use that. By a screen, I am referring to all the HTML elements you see for a web page on one computer screen. For our example here, a screen consists of one line of text and a button next to it. We are dealing only with one page here. This is the skeleton of the code of the page.
<html>
<head>
<script type="text/javascript">
//minimal script
</script>
</head>
<body>
Screen 1 HTML Elements e.g. <button type="button" onclick="alert('Screen One')">Screen One Button</button>
<script type="text/javascript">
< !—JavaScript Ajax statements to download second screen -- >
</script>
<div id="D2">
</div>
<div id="D3">
</div>
<script type="text/javascript">
< !—JavaScript Ajax statements to download third screen -- >
</script>
<!— External JavaScript tag of minimal length -->
</body>
</html>
I used a personal web server called Abyss Web Server X1 for the illustration. So the link for the page at the server is http://localhost/myPage.htm. Replace localhost with your own domain, like www.mywedsite.com. The name of the long file is myPage.htm. This page is at the root directory at the server. There are two JavaScript Ajax code segments and two JavaScript code segments.
Let us look at the code skeleton of the page. You have the normal <html></html> tags. There is a HEAD element. The HEAD element has a piece of JavaScript code. This script should be of minimal length, so that the initial page information will have a short download time. You have the BODY element.
In the BODY element, you have some text and a button. This is followed by the first JavaScript Ajax code. After that you have two DIV empty elements. Each of these elements has an ID. After these DIV elements you have the second JavaScript Ajax code. And after that you have an external JavaScript tag, which should also be of minimal length to have a short download time.
It is the two JavaScript Ajax code segments that download information (data) for the rest of the page in advance. When you type the address of the page in the address bar of your browser and click Go, the page above is downloaded. What you would see within a reasonable time, in the downloaded page (first screen) is the text “Screen 1 HTML Elements e.g.” and a button labeled “Screen One Button.”
Think about it; if this were all you had to download, along with the minimal JavaScripts (internal and external and the Ajax code segments), the page would be downloaded within a reasonable amount of time. After this initial content, which is the first screen, has been downloaded, while the user is reading the first screen, the other two screens of the page will be downloaded without the user being conscious of the downloading process.
As soon as the next screen content is downloaded, it is added to the page. The user may notice the length of the page growing, but that will not disturb him reading the first screen; in other words, as the screen contents are added below the first screen, the page does not scroll downward.
There are three screen content sections. After the first screen has been downloaded with all the JavaScript code segments, the first JavaScript Ajax code segment downloads the second screen; the second JavaScript code segment downloads the third screen. All of the JavaScript code (internal, external or Ajax code segments) should be of minimal length so that the initial screen content will be downloaded in a reasonable amount of time.
The JavaScript at the head should have the initial functions that the user needs to use. The external JavaScript at the bottom of the HTML code should have function that the user can execute later as he works with the page. An example of such a function is a function to open the next page.
Next: Some Useful Information >>
More HTML Articles
More By Chrysanthus Forcha
