Home arrow JavaScript arrow An Example Image Gallery with Chrys`s Approach to ACP

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
August 14, 2009
  1. · An Example Image Gallery with Chrys`s Approach to ACP
  2. · The Code for the Second Page
  3. · Code for the Third Page
  4. · Code for the Third Page Continued

print this article

An Example Image Gallery with Chrys`s Approach to ACP
(Page 1 of 4 )

Image Gallery with the Document Phase of Chrys’s Approach


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:






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();








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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials