An Example Image Gallery with Chrys`s Approach to ACP
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.
The Perl qq{} operator is used. 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 second page. This is followed by a line break element. Next you have a button; when this button is clicked, the third page is loaded.
Next you have the tag for the second image. The attributes of the second image are similar to those of the first image tag in the first page, except for the values of the src and ID. The value of the ID for the first image is “I0;” that for the second image is “I1;” and that for the third image will be “I2.”
At this position, the second image is downloaded. The image has an ID whose value is “I1.” We shall see the use of this ID at 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 will not occupy space and will not be seen. It is good to put the tag of 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 six of the series. To save time, I will not discuss it here.
After the Ajax code segment, you have the function to load the third page. The purpose of the first three lines of this function should now be obvious. The next statement sends the image tags of the three images as content to a table cell in the third page. This is what you will have in the table cell of the third page:
Note that the value of the display property of the first image now is block (not "none" as before). These code tags are sent to the third page; they are not used by the second page. The value of the display properties of the other two images is "none." Under this condition, as soon as you load the third page, you will see the first image. While you are viewing the first image, the third image will be downloading. The tag for the third image exists only in this table cell (sent with the other two image tags from the second page).
The first image is downloaded in the first page and the second image is downloaded in the second page. These tags are simply sent, not executed. All of the image tags will be in the cell in the third page; this is where they finally reside to achieve their purpose.
We count on the fact that when the first and second images have been downloaded, they will be cached by the browser at the client’s computer. Whenever you need them in any page, they will be quickly available. A good browser caches its downloaded resources.
Note that the entities of the last statement of the function have been escaped, even escaping back slashes. This is because, from the server, you are sending the whole page as a string to the client (to page 1). At the client, this sub string (the last statement above) will finally end up in the table cell in page three as a set of tags.
The last statement in the Perl file in the server returns the string that is in the qq{} operator. This Perl file is an executable file. When the file is called by Ajax, it forms the string and returns it (sends it to the browser).
JavaScript 
Active Client Pages: Simple Document Phase Example Continued
