invoke script after image really loaded

[wankata]

$(document).ready() method fires when the DOM tree is loaded, but this does not include loading images itself. It can be a problem, when you've got larger images, or bandwidth problems, when you try to detect the width and hight of the first image.

One possible solution is to use the imagesLoaded library like this:

$(document).ready(function(){
    $(".gallery").imagesLoaded(function() {
        $('.slideShow').slideShow({interval: 3});
    });
});

I think, it should be mentioned somewhere in the documentation :)

[wankata]

Actually there is a much more straight forward way to achieve this. Instead of using $(document).ready(), one should use $(window).load() method which fires after the DOM tree and the static media is loaded. It does the same thing the imagesLoaded library does.

And one more thing. It's annoying that the images are shown before the library is fired (Yeah, that's pretty normal, because we wait for the images to be loaded and then we fire the gallery plugin). So it's better to hide the images in the css (display: none) and than to show them again in the javascript.

Have a nice hacking!