Pre-Load Your Galleries

An Adult Webmaster Resource

Written by Tom from Tom's Newbie Booster

Here's a little something that I've been playing around with this morning. It's a sales tool which is a combination of a number of things out there on the web:

- Intermediate page Flash ads. I've been seeing some EXCELLENT full-screen Flash ads lately on mainstream movie type sites. Say you want to read a review on a movie - you click on the relevant link, and then hit an intermediate page with a big ad on it. There's a small link above the ad which says "Continue on to the page you requested" - or similar. It's hard NOT to look at the ads as they take up all of the screen.

- Flash pre-loaders. If you've been to any Flash sites you'll probably be familiar with that progress bar which tells you how much of the Flash movie has loaded. That's called a pre-loader. What's happening is that the Flash movie is probably 500kb or more, and because of the lack of speed of most connections, the Flash file must be downloaded over a period of time. A pre-loader lets surfers know how long they've got left to wait. It stops them getting so bored or frustrated they just leave.

- Image pre-loaders. These were around long before Flash was. Image pre-loaders do the same thing as Flash but with just the ordinary every day images on a page.

- Full page ads. I think the last idea that I've borrowed from is the FPA, which is much like the first kind of ad I mentioned. FPAs are devastatingly effective. They work so well.

Making money from making 'em wait

I decided to see if I could make something which would pre-load a gallery from one of my websites. The aim being to advertise to the surfers out there in a fresh way - that MAKES them take notice. I've talked a lot at how TV commercials work because surfers are sitting there anyways... this is the exact same principle. We're gonna hit 'em with an advert which they 'have' to sit through. The idea being:

- The surfer gets a percentage loaded bar to let them know the progress of the download.
- A full-screen advert is displayed while the surfer waits.
- When loading is complete - the gallery is then shown.

There were two major problems I hit at this stage:

1) There IS no way to preload a webpage that I can find.

2) What if someone is on a fast connection? They wouldn't have any waiting to do, and would miss the advert we wanted them to see.

So I decided to CHEAT! I went to these pages:

Dr. Watson Tool (Times download speeds of a gallery)

How to Calculate and Speed-Up the Download Time of Your Web Site

... and I learnt more about calculating the time it takes to download an average free site gallery. I reasoned that most galleries are pretty much the same. They have:

1) Some ads.
2) 8 - 10 thumbnail images of roughly the same size.
3) HTML which would be about the same file size from gallery to gallery.

I then used Dr. Watson to time one of my galleries. It told me that 25 - 30 seconds would download the gallery to a regular-speed modem. From then on - all I had to do was find a way to:

a) Show a page which preloaded the images from the gallery to come.
b) Show an advert of some description while this happened.
b) Have a 'fake' percentage loaded bar that takes about 25 seconds to complete.
c) When it reaches 100%, bounce them to the gallery.

Working example...

Take a look at what I came up with:

Working example of how to pre-load a gallery

There's 3 parts to the page.

1) The fake pre-loader bar. This just counts upwards and takes about 25 seconds to do so. When it reaches 100, it redirects the surfer to the gallery. The surfer can't enter the gallery before this.

2) The advert. It's just a regular simple advert. Could be text, could be text and graphics - you choose on this one. You could even slap a FPA from your sponsor in here.

3) The 'invisible' part is at the base of the page. If you view the source code of this page, you'd see:

<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="0" WIDTH="600">
<TR>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/11.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/12.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/13.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/14.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/15.jpg" BORDER="0" width="1" height="1"></TD>

</TR>

<TR>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/16.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/17.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/18.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/19.jpg" BORDER="0" width="1" height="1"></TD>

<TD ALIGN="center"><IMG SRC="pictures/thumbs/20.jpg" BORDER="0" width="1" height="1"></TD>

</TR>
</TABLE>

It's here that I'm loading the thumbs from the next page. They're loaded in a 1x1 format so that on the next page, they'll appear instantly because they'll load from the cache. So this pre-loader isn't REALLY all that fake. We are loading the images in. We're just capitalizing on the fact that the surfers will have to wait for the images to load.

I think this could work really well with any kind of free site. As to whether or not it could be listed in the link lists - that's another matter. It would be GREAT to see this kind of thing start to take off - because it might just be something that could make sales with free sites in the future.

Getting this set up on your webspace

It's actually pretty straight forward to get this working for you.

1) Download this zip file:

pre-loader.zip

2) Unzip it.

3) Work through this one bit at a time.

- The page that loads the gallery should be named something like: pre-gallery1.html. This is the page which will preload the webpage. It's just a regular webpage that we add the animated loading bar on to. There's nothing at all special about it.

- Add this code where you want the pre-loader bar to appear on the page. Just copy and paste it from here into the HTML code:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="401" HEIGHT="23" id="gallery1" ALIGN=""> <PARAM NAME=movie VALUE="gallery1.swf"> <PARAM NAME=quality VALUE=best> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="gallery1.swf" quality=best bgcolor=#FFFFFF WIDTH="401" HEIGHT="23" NAME="gallery1" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

- Now make the page look like you want to. Put an ad on it or even give it the same colors as the rest of the website.

- At the base of the page, do what I did with a table containing the images from the next page. Make their width and height 1 pixel. This makes them load - but the surfer cannot see them. When the surfer goes to the next page, the images will pop up instantly. This is actually optional - but it's better if you do it.

- Now open up gallery1.txt and put in the url to the gallery that should appear when the pre-loader reaches 100. When the load bar reaches 100%, it looks in this text file to see where it should bounce the surfers. I included this so that you could alter the url of the gallery without having to edit the Flash file.

- Now upload:

gallery1.swf
gallery1.txt
pre-gallery1.swf

... to your webspace.

4) Repeat those steps for the other galleries on the site. There are 2 more gallery swf files and corresponding .txt files for this purpose. You can use a maximum of 3 pre-loaded galleries per sub-folder on your webspace. This should be enough as most sites only have 2 / 3 galleries on them.

As usual - give me a shout if you hit problems or need help setting this up.

TOM ^"^

ICQ 12616560
Email tom@tomsnewbiebooster.com