Home arrow HTML arrow Page 2 - A Multiple Page Image Gallery with Active Client Pages
HTML

A Multiple Page Image Gallery with Active Client Pages


You can have a web page which has pictures. This page may have links to other pages that have pictures. The linked pages may also have links to pages that have pictures, and so on. In this second part of a two-part series I show you how to make the pictures in all these pages display quickly at the browser, when the user clicks a button. Of course, we are going to use ACP techniques to solve the problem. Only the first picture of the first page may be displayed slowly.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
July 28, 2009
TABLE OF CONTENTS:
  1. · A Multiple Page Image Gallery with Active Client Pages
  2. · Use of ACP in the Example
  3. · The Code
  4. · The Three Pages

print this article
SEARCH DEVARTICLES

A Multiple Page Image Gallery with Active Client Pages - Use of ACP in the Example
(Page 2 of 4 )

Active Client Pages, or ACP, means downloading web page text or resources in advance. The master page has to download its own images in advance; it has to download the HTML contents of the three new pages in advance; and it also has to download the images of the three new pages in advance. All of these are principles of ACP.

We already know what to do to have the master page download its images: you put the tags of the images at the bottom of the page as we did in the previous part of the series. For the HTML contents, Ajax functions are used to download the content for each new page as a string. The images for the other three pages are downloaded in the same way as those for the master page. After the Ajax functions, you just include the tags of these images. When you click a button to load (open) a new page, the HTML content of the page and images for the page are sent to an output stream that will be made into the page.

Note: when you download images for the next pages, as we mention above, any good browser should cache the images. In this way, when a new page is produced, the images will be taken from the browser cache (at the client) and not from the server in some faraway country.

The Directory Structure

The master page and its images (in an image folder) are in the root directory. The HTML contents of the three pages are in Perl files. Each piece of HTML content is in its own Perl file. Each of these Perl files is in the cgi-bin directory.

For this example, the images for the master (first) page are in the masterImages directory, which is a sub directory of the root directory. This sub directory has the other three sub directories, which are department0Images, department1Images and department2Images. There are images in these directories. The directories are for images that are in the three pages produced by clicking the three buttons at the first page.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

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 
Support 

Developer Shed Affiliates

 




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