Building an Image Gallery with Active Client Pages
When you have a web page in front of you that is of an image gallery and your Internet connection is slow, you will notice that, when you click a button or link to see the next image, this next image generally takes a long time to appear. If you read this two-part series, visitors to your web site will no longer have to wait a long time for images to appear in their entirety. Thanks to a new technology called Active Client Pages, abbreviated ACP, only the first image or the first set of images will take a long time to appear on the screen.
Building an Image Gallery with Active Client Pages - The Strategy (Page 2 of 4 )
We shall have a table cell that will contain each of the images displayed. The tag of the first image will be there, with the value of its display property set to block.
Now when the value of the display property of an HTML element is set to block, the element is visible on the web page, and it occupies space. When the value is set to “none,” the element is not visible on the web page, and it does not occupy space; instead, the space it would have occupied would be taken up by other elements on the web page.
The tags for the rest of the images will be at the bottom of the page, but the value of their display property would be set to “none.” They will be just above the end BODY tag. The page has to be designed in such way that it will be rendered incrementally at the browser. This means we have to give a definite width to the table's columns at the start of its code.
Such a page would be rendered at the browser as it arrives. So while the rest of the images (except the first one) are being downloaded, the user is spending time looking at the first image, as he should. By the time the user wants to see the second image, it and/or or all the rest of the images would have been downloaded.
As soon as he clicks the button to see the next image, it will be displayed, because it has already been downloaded. The user does not sit waiting for the download time to elapse before he sees an image.
The image tags at the bottom of the page should be typed in the order in which they will be displayed. In this way, even if the last image has not been downloaded, by the time the user needs an image within the queue (say the fifth image), that image would have been downloaded.