Fullscreen Background Slideshow: jQuery vs Shockwave Flash

A client wanted a website with a background that changes every a few seconds. My friend and I had two options: use

1. JQuery, or; 
2. Shockwave Flash movie (swf) 

Our consideration was which solution would load more quickly. As much as possible, we did not want the site's first-time visitors to see the loading spinner for more than 5 seconds, if not at all. After multiple searches, my friend Eduard found this one.

Build Internet's Supersized! jQuery Plugin 

Supersized! is a fullscreen background slideshow built using the jQuery library. The demo uses 9 images, sizes ranging from 97 kb to 236 kb. The width ranges from 800 px to 1024 px; height from 511 px to 1000 px.

If you are a first time visitor of the site, it takes about 2 seconds before you see an element (some texts); 15 seconds after, you begin to see the slideshow background. Good enough! At least, the visitor wouldn't have to wait for a long time. That depends of course on the Internet and hardware speed. (My speed during the test was 620 kbps (down), 393 kbps (up)).

What If It Had 14 Images? 

• I used instead 14 images that were 1280 x 800 pixels ranging from 79 kb to 129 kb in file sizes. Testing it in my local drive, it took 24 seconds before the slideshow began. Not good! I was just staring at a blank page, waiting, wondering what was happening. 
• I decided to make a default background using CSS. The result was better, at least, I was seeing something. However, I still had to wait long before something had to happen. 
• So I decided to put a loading spinner. Much better! At least, the spinner tells the visitor that there's nothing wrong with the site, his computer, or connection. But still, he will have to wait a while. The Supersized plugin actually includes a loading spinner but it doesn't show up until a few seconds before the slideshow begins. 
• In order to divide the queuing time, a trick is to show some text elements before the slideshow begins. Texts load faster, so at least, the site visitor can have something to read on while waiting. 
• In my example, however, I didn't include any text. Instead, an image (which was a logo) was the only other element on the page. Testing it in my local drive using Chrome (cache cleared), it took 22 seconds before the logo showed up; then another 4 seconds before the slideshow began. Not bad! On Safari, the result was not the same. After clearing its cache, Safari was showing only a white page. I had to stop the stop watch after 2 minutes. (Does that prove Chrome is really much a faster browser?) 
• My next option was to preload the images using Javascript but the result was the same. So, I downsized the images, ranging from 60 kb to 88 kb each, all 800 x 440 pixels. On Safari, the same thing happened, after 2 minutes, nothing was showing but a white page. On Chrome, the logo showed up after 7 seconds; the slideshow started 2 seconds after. A slight drawback was the images being slightly pixelated.
• I settled for the higher resolution of the images. After clearing Chromes cache, I tested the page on the Net. What surprised me was that the page loaded faster than when on the local drive. It took only 5 seconds. I got the same result using Safari. You can view the result at amikvs.com. 

Fullscreen Background Slideshow Built Using Flash 

Unfortunately, I could not test the same 14 images using Flash. I have not been using Flash for years now. Instead, I used a Flash movie with only 7 images. The file size of the Flash movie is 575 kb. On the local drive (cache cleared), it took 23 seconds before the first web element (some texts) showed up; 1 second after that, the slideshow began.

On the Net, after clearing my browser's cache, it only took 5 seconds for the background slideshow to begin. (I wondered why was it faster on the Net than on my local drive? Beats me!)

You can view the sample at our lab.

How To Set a Shockwave Flash Movie as HTML Background 

You cannot actually set a Shockwave Flash movie (swf) as HTML background. You have to embed it as an object. That means, it is one of your HTML contents. So, if you add another element, like text, it shows below the Flash movie instead of floating on top of it. To make all other elements float on top of your Flash movie, the trick is to use CSS where you assign the Flash object a div id. Something like this.

#flash { position: fixed; margin: 0; padding: 0; top: 0; left: 0; height: 100%; width: 100%; z-index: -99999; }

It is important that you assign a high negative value to your z-index so that all other elements of your HTML stay floating on top of your Flash object.

Then, on your HTML page, set the param of the Flash object to "wmode" and "transparent". Something like this.

<param name="wmode" value="transparent">

Shockwave Flash Files Are Lightweight 

 Compared to raster (bitmap, pixel based) images, a Flash swf file is lightweight because it is vector based. The quality of a vector image does not change even if you re-size it into something bigger. So when composing your Flash movie, the size of it does not have to be as large as your computer screen.

A photograph is a raster type of image. You can convert this into vector before you import it into Flash. That will make your SWF file smaller in size. There are tutorials on the Net on how to convert raster images into vector images.

Pros and Cons 

Using a jQuery Supersized! slideshow is easier to build. The codes are already given. You just edit the file names of the images. It is easier to maintain it as well. If you want to change the images, simply overwrite the existing ones. Use the same file names so that you don't have to edit your HTML.

Using a Flash movie as background loads faster if the file size is small. The transition of the images is much more fluid. However, it is not easy to build it unless you are a Flash expert.