Downloading Long HTML Pages with ACP - Generalizing ACP for Long Web Pages
(Page 4 of 4 )
A long screen can be broken down into its screen contents. After the top-most screen's content has been downloaded, the sequence of the other screens' contents can be downloaded in advance without the user being conscious of the downloading process. This downloading is done by Ajax.
The designer of the web page has to know the number of screens of content in advance. Apart from the first screen's content, each of the other screens of contents is downloaded, and fitted into a DIV element. When you design the initial page, it should have empty DIV elements for this purpose. Each of these DIV elements should have an ID so that you can use the following type of statement to assign a downloaded content to a DIV element:
document.getElementById('D2').innerHTML = screen2;
Here the ID of the DIV element is ‘D2’; the screen content for the DIV element is held in the screen2 variable.
When you type the address of the page in the address bar of your browser and click Go, you should initially have a page that has only the first screen's content. This page should have the empty DIV elements.
This page can have JavaScript in the HEAD element and at the button (just above the end BODY tag). The number of statements in the JavaScript in the HEAD element should be as small as possible. This will minimize download time. So these statements should be statements that the user needs to use initially.
The JavaScript at the end of the page should have the rest of the JavaScript statements. This script should also be as short as possible to minimize download time. You put this script at the bottom, so that it will be downloaded last, with the first screen's content. Before it is downloaded, the user should be seeing the first screen content.
The User’s Appreciation
The aim of this article is to show you how to provide fast presentation of a long page to the user when he has a slow Internet line. If the user has a fast Internet line, he may not notice the difference between this approach and an ordinary design. If he has a slow line, the first screen's content of a long page would be presented to him faster than if the design was ordinary. As the first screen's content is downloaded, he would start working. The rest of the screens' contents would be downloaded without him noticing, and he would feel that his page has been downloaded fast.
He might only notice from the vertical scroll bar that the page is increasing at the bottom. This is not a big deal, as his work (reading) is not disturbed.
The Reload (Refresh) Browser Button
I tested the code for the above example with Internet Explorer 6, Mozilla Firefox 2, Netscape 8, Opera 9 and Safari 3. After the whole page had been loaded, I clicked the Refresh (Reload) button in each of these browsers, and the complete page was reloaded for all the browsers except Internet Explorer 6.
In the case of Internet Explorer 6, only the first screen's content was reloaded. Now, this is a weakness with Internet Explorer 6 because the code was written according to the HTML, JavaScript and DOM specifications. I do not know if the later versions of Internet Explorer have overcome this weakness.
The complete code of the above example is in three files. I have zipped all of them into one zip file. You can download the zip file and verify if the later versions of Internet Explorer overcame the weakness or use the code for a reference or your own experiments.
DownloadingLongHTMLPageswithACP.ZIP
Conclusion
When you design a long web page and you want it to be downloaded fast with a slow line, it is the first screen's page that is actually downloaded fast when you use ACP. The rest of the page is downloaded without the user knowing, so the user has the perception that the whole page has downloaded fast.
I hope you appreciated this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
