A bandwidth-efficient fading slideshow in javascript

Why another fading slideshow?

Fading slideshow are the slideshow that use fade-in and fade-out as slide transitional effect. All fading slideshow script I can find on Internet has two problems in common.

They try to pull all slides from server when the web page is loaded. There are javascript ways (jquery for example) and flash ways, but all try to pull all slides from server. Modern web visitors stay an average of a few seconds on every web page they visit, thus these methods are not bandwidth-efficient because the visitor might leave the page before slideshow finishes, or even worse, are also unfriendly if visitors had to wait for slides downloaded before the slideshow start to run (most works this way). They also sometimes do not work when the number of slide is unknown to the client or is very large / unlimited, which can happen in many cases. E.g. a big photo album, or logos of all members of an association (large number of slides), or, a site offer pictures catpured from CCTV once a few seconds (number unlimited). They should load a slide only when it is to be displayed.
They lose both fading feature and slide show feature when javascript/flash is not activated. They should fall back to slideshow-only mode in that case.

Example

Another example

The method introduced in this article solves both problems. You can see it in action (you need to wait 10 seconds to see first transition) and try play with it by turnning off javascript. You can download the javascript and use it on your own as I put it in public domain.

The client side

To be able to fall back when javascript / flash is disabled, the slide should be using meta-refresh feature, which reloads the whole HTML document, and be embeded in an <object> tag so the parent containing frame is not reloaded. Upon every reload, the server side should generate corresponding meta-refresh URI that points to the next slide.

When javascript is activated, javascript takes the role of meta-refresh, thus meta-refresh must be enclosed in <noscript>, as following:

<noscript>
    <meta http-equiv="refresh" content="3;url=?*" />
</noscript>

And then the javascript in page-transition.js loads the page specified in meta-refresh using XMLHttpRequest, parse the returned HTML document, find out the next slide's URI and slide interval, and replace the content of the current HTML page with the newly requested page, using fade-in effect. This process goes on forever until user leaves the page.

The server side

I use SSI (server side inclusion) for my website. Doing loop in SSI is a bit trickly. Since it doesn't have arithmatic data types like "integer", loop count has to be done by concatenating text strings, which differ from other programming language where arithmatic increase is used. The server side code are 5 lines like the following:

<!--#if expr='"$QUERY_STRING" = "****"'-->
  <!--#set var="next" value="*"-->
<!--#else-->
  <!--#set var="next" value="$QUERY_STRING*"-->
<!--#endif-->
<noscript>
  <meta http-equiv="refresh" content="10;url=?<!--#echo var="next"-->"/>
</noscript>

Every time a page reloads, the query string is padded with a single asterisk. Our slide have 4 pages, thus the SSI script replace quadrupal **** with single * when the script sees it.

Feedback

Please kindly feedback your comments on this method or let me know more information, e.g. if other sites offered methods that achieve same or better effect.

Thanks

Thank my colleague Wang Congming who finished the half-done script I passed, and thank him for forgiving my usual and tried-to-avoid ignorance and irresponsibility for starting a script and leaving to colleage to finish.