The Script Approach to Active Client Pages: Chrys`s Enhancement
(Page 1 of 4 )
In this conclusion to a three-part series on active client pages, I give you my enhancements to the Script Approach. I am the one who came up with the Script Approach. I derived it from Vlad’s work. Before I start my enhancements, let me talk about the store and Vlad’s Fake Get Method. Vlad himself calls one of his methods the Fake Get Method.
The Store
Active Client Pages Technology needs a store. With this approach, the store is the frameset (parent). Data is stored in variables or object properties or arrays in the JavaScript of the frameset. The pages come and go, but data for the different pages can remain in the frameset.
Vlad's Fake Get
Instead of using the frameset to retrieve data as I have shown, you can use what Vlad calls the Fake Get Method. I have not yet read anything about this method, so I will not comment on it in this series.
My Enhancements
Images
Images take a longer time to download than text. If you have been using web picture galleries, you must have noticed that, when you click a link to see an image (enlarged form), it takes time for you to see the image. As of today, only the first image (or first set of images) may take time if you use ACP technology.
Let us say that you have a web page, with or without a frameset. You want this page to be able to display 30 images, one at a time, in a particular area. Design your page such that the first image will be in that area. Let this area be a table cell. With some designs, it can be a DIV element (see below) or some containing element. Give the table cell definite dimensions. The first image tag of the table cell should be something like this:
<img id='I1' src='image1.gif' style='display:block'>
Note that the value of the style attribute is 'display:block', meaning that the image has to be displayed.
As for the other images you should have something like the following at the bottom of the BODY element.
<img id='I1' src='image1.gif' style='display:none'>
<img id='I2' src='image2.gif' style='display:none'>
<img id='I3' src='image3.gif' style='display:none'>
............
The value of the display property of each of these image tags is "none." In this way, when they are fully downloaded, they will not appear on the page and will not occupy space. While these images are being downloaded, the user will see the first image; you have designed your page in such a way that it is rendered by the browser as it arrives. From the user's point of view, this first image can take a long time to appear on the screen. The other images will not take long to appear on the screen, because they have been downloaded in advance.
You can have a button on the page, which, when clicked, replaces the image in the area by one of these images at the bottom. I normally use the table cell innerHTML property for this replacement. Note that the first image is also among the images at the bottom. Before you replace it, you have to change the value of its display property to "none." The image replacing it should have the value of its display property set to "block." In this way you can change the images in the area, with no speed problems after the first one has been displayed.
Next: Script Approach Without Frameset >>
More JavaScript Articles
More By Chrysanthus Forcha
