An Example Image Gallery with Chrys`s Approach to ACP
(Page 1 of 4 )
This is the seventh part of my series "Active Client Pages, Chrys’s Approach." In this part of the series, we look at how the Document Phase can help us with images. You need good knowledge of HTML, JavaScript and Perl in order to understand this part of the series.
Image Gallery with the Document Phase of Chrys’s Approach
Description
Assume that there is a session of three pages. The first page has text, the second page has text and the third page has an image gallery related to the two previous pages. For simplicity, let us have three images in the gallery. We shall download the first image with the first page; this image will not be displayed. We download the second image with the second page; this second image will not be displayed. We download the third image with the third page; this image will not be displayed immediately as it is downloaded.
In the third page's gallery, the first image downloaded will be displayed first, the second image downloaded will be displayed second and the third image downloaded will be displayed third. These images will be displayed on the same spot (area) of the third page. ACP is involved in the fact that the first two images and even the third are downloaded in advance.
Any good browser should cache images as soon as they have been downloaded. When the user arrives at the third page and asks for an image, it will be taken from the browser’s cache and not from the server.
As soon as you open the third page, the first image should be seen.
The Code for the First Page
This is the code for the first page:
<html>
<head>
</head>
<body>
This is the First page.<br />
<button type = "button" onclick="loadSecondPage()">Load Second Page</button>
<img src="http://localhost/pic0.gif" id="I0" style="display:none">
<script type="text/javascript">
//Here is the Ajax Code Segment. Same as in part V.
function loadSecondPage()
{
var pageTwo = document.open();
pageTwo.write(page2Doc);
pageTwo.close();
}
</script>
</body>
</html>
In this simple code, you have an HTML document. You have a HEAD element, which is empty, and a BODY element. The first line in the BODY element is text, which says that you are at the first page. This is followed by a line break element. Next you have a button; when this button is clicked, the second page is loaded.
Remember, in the description, we said that there are three images. All of the images will be displayed in the third page. One is downloaded in the first page, the other is downloaded in the second page and the third is downloaded in the third page. After the button mentioned above in the BODY element, you have the image tag for the first image. At this position, the first image is downloaded.
The image has an ID whose value is “I0.” We shall see the use of this ID on the third page. The value of the CSS display property for the image is “none.” In this way, the image will be at that position, but it will not occupy space and will not be seen. It is good to put the tag for the image below all the visible elements of the page. In this way, while the user is reading the page, the image will be downloaded.
Next in the BODY element, you have the JavaScript. The first code segment of this JavaScript is the Ajax code segment. It is the same as what we saw in part five of the series. To save time, I will not discuss it here.
After the Ajax code segment, you have the function to load the second page. The purpose of the three lines of this function should now be obvious.
Next: The Code for the Second Page >>
More JavaScript Articles
More By Chrysanthus Forcha
