Further support on www.tinaja.com
There is nothing more infuriating than having to sit around and wait
for an ad banner or
some other obnoxious header to completely download before a page can be
attractively
viewed. Since a bored or a frustrated viewer is a gone viewer, here are
some ploys to
control what loads when on an HTML page...
(1) -- Keep banner file sizes short
The longer the banner and the more there are of them, the longer it
takes to display. Always
keep banners few and small. Use a minimum number of colors and optimize
GIF files for
small palettes, no comments, and no trailers. Avoid ~all~ banner
animation ion, sound, or
other special effects.
The GIF Construction set sharewave includes several file length
optimizing tools. A
reasonable goal for a 65 x 280 pixel banner is 5500 bytes or less.
(2) -- Use the LOWSRC operator
The LOWSRC operator in HTML lets you initially display one image
and then later display
a second one. The second image starts displaying after all currently
viewable information is
placed on screen. Normally, LOWSRC is used to provide a faster loading
lower resolution
"placemarking" graphic image. It also can be used for a two-step
animation effect.
But downloading yet another banner file can end up adding insult to
injury. So one ploy I
use is to Let LOWSRC rewrite your background wallpaper.
This defers writing the real
banner until after loading, but has zero penalty in the total number of
bytes that need downloaded
before a useful page gets displayed.
(3) -- Use the 1 x 1 preimage ploy
Certain browsers do not bother to initially image anything that is far
enough downscreen that it
cannot be seen without scrolling. Only after scrolling do the needed display
elements appear.
Which leads to the following subtle annoyance: You view a page and decide
to scroll down
before the banners are fully displayed. Any new design elements in the
downscreen info are
not yet present and will not fully display until after the (now
invisible) banners finish themselves.
So your downscreen info still might not be viewable.
Since HTML images anything in the file order received, I've found this
trick to be a useful
workaround: Place anything you want your viewer to see ahead of a full
banner load earlier
in your file and ask it to create a 1 x 1 single pixel image.
Here is the sequence: Needed page elements go down first, creating some
negligble dots in
the upper left of the first screen. The banner lowsrc substitute goes down
next, preferably
using a file (such as wallpaper) that is needed anyway. The rest of the
viewable page follows.
The banners then try to load and invisibly continually downloading on a
scrolldown.
On a scrolldown, the needed elements have already been downloaded, so
they do not have to
wait for the banners to finish. The illusion is a ready to view page, even
though the banners are
continuing to download in the background.
An example...
Here's an example from my home page. Start with the usual stuff, including wallpaper...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML> <HEAD>
<TITLE>Don Lancaster's GURU'S LAIR home page</TITLE>
<META NAME="GENERATOR" CONTENT="Mozilla/3.0Gold (Win95;
I) [Netscape]"> </HEAD> <BODY TEXT="#000000"
BGCOLOR="#C0C0C0" LINK="#0000FF" VLINK="#238E23"
ALINK="#FF0000" BACKGROUND="newsum.jpg">
A group of blue buttons will be needed downscreen. Download one of these
now as a 1x1
pixel image. The button will be available for downscreen use ahead of any
full banner loads.
A single dark pixel will appear ahead of the first banner...
<P><FONT SIZE=-2> <IMG SRC="barro.jpg"
BORDER=0 HEIGHT=1 WIDTH=1
ALIGN=CENTER></A></FONT>
Now put down the banners, substituting the existing wallpaper for their initial low res images...
<A HREF="http://keynet.net/~lindsay"><IMG
SRC="lindad5.gif" LOWSRC="newsum.jpg"
ALT="Secret books from Lindsay Publications." BORDER=0 HEIGHT=64
WIDTH=280>
</A> <FONT SIZE=-2> <A
HREF="http://www.xtronics.com/kits.htm"><IMG
SRC="kit2ad.gif" LOWSRC="newsum.jpg"
ALT="Click for free electronic kit plans." BORDER=0 HEIGHT=64
WIDTH=280></A><BR>
</FONT><BR> <IMG SRC="blustrp.gif" HEIGHT=13
WIDTH=600
ALIGN=CENTER><BR> </P>
Here is what happens: A single pixel gets written to the screen. The
banner space gets cleared
back to the background. All needed viewable screen elements go down. The
banner then starts
its slow display sequence, but the viewer has all the rest of the viewable
page ready to go.
Should the viewer scroll downscreen, the needed buttons are already
downloaded so a full
downscreen image will rapidly appear. The still incomplete banners will
quietly download as
a background task.
As a bonus, there's an "element of mystery" of what the banner
is really going to end up
saying. But one that is in no way forced upon the viewer.