[jQuery] Re: jQuery+Cycle : slideshow with progressive image loading

[Nicolas Le Thierry d'Ennequin]

I'm honored, Mike! Thanks also for the minor but well-needed
improvements to the code.

Now here's another, probably more useful, version:
- the slide URLs are registered directly from the DOM
- the img nodes are removed from the DOM (except for the first 2)
- the slideshow is launched with 2 slides, further slides are added as
soon as they're loaded.

I think that adding this kind of "asynchronous loading" capability
directly in the Cycle plugin (through an optional parameter) would
definitely be great!
But maybe it's not so simple because it should be able to deal with
mixed content (IMGs mixed with DIVs that don't require preload),
images wrapped in A elements, etc., the slide order should be
preserved...

Well, I'm curious to hear what you think about the idea.

Cheers,

Nicolas


$(document).ready(function(){

        var stack = [];
  var elements = $("#slideshow img");

  for (var i = 0; i < elements.length; i++){
    var img = new Image(715,260);
    img.src = elements.eq(i).attr("src")
    // all img nodes (after the second) are removed from the DOM
    // once the corresponding image is loaded, it is pushed into the
stack
    if (i > 1) {
        elements.eq(i).remove();
        $(img).bind("load",function(){
        stack.push(this);}
      );
    }
  }

        $("#slideshow").cycle({
                fx:"fade",
          timeout:2000,
                before:onBefore
        });

        // add images to slideshow
        function onBefore(curr,next,opts){
                while (stack.length > 0){
                if (opts.addSlide) opts.addSlide(stack.pop());
          };
        };

});