stephenmattison's posterous

PNGs, transparency, and OpenGL

WebSockets -- A practical guide

WebSockets -- Test server

JQuery slideshow wait for images to load before starting

If you have large slideshow images often times you need to wait for the images to load before starting the slideshow. If you don't, then the slideshow will display an image that has not yet been loaded, and you will get a blank screen. This code solves this problem.

This will display a starting image, and then when all images are available, will cycle through them.

<div id="slideshow">
  <img src="first.jpg"/>
</div>

$(document).ready(function() {
    var IMAGE_DIR = '/images/';
    var additionalSlides= ['second.jpg', 'third.jpg'];
    var numSlides = additionalSlides.length;
    
    var $ss = $('#slideshow');
    var loadedSlides = 0;
    for (var i in additionalSlides) 
    { 
        var img = new Image(); 
        img.src = IMAGE_DIR + additionalSlides[i];
        $(img).bind('load', function() { 
           if (++loadedSlides === numSlides)
           {
                for (var j in additionalSlides)
                {
                    $ss.append('<img src="'+IMAGE_DIR+additionalSlides[j]+'" />');
                }
                $ss.cycle({
                    fx: 'fade'
                });
           }
        }); 
    }
});