How to Wait for All the Images to Be Loaded in Jquery

Recently I've just wanted a nice rollover caption implemented on our wedding invitation website, such on a list of wedding invitations, when you hover on one, a caption will be shown. Of course, there are some wedding invitation categories that would have more cards than others so we need paging. And I implemented the paging using ajax calls. This is the part that complicates everything since the caption library should only be called once all the images are loaded.

At first I tried window load function, it worked on all the first page. But on pages with paging, it failed. So if you have a case where you only display the image on 1 page you can try:

$(window).load(function () { $("#templates").ImageOverlay({ border_color: "#6f5140", overlay_text_color: "#FFF", overlay_color: "#6f5140" }); });

I'm assuming you have a div with "templates" id, which contains images element for the image caption library mentioned below.

But what really work, is on the page (below) where the images are rendered (im my case it's a partial view). I've insert the following script:

$('#templates').waitForImages(function () {
        $("#templates").ImageOverlay({ border_color: "#6f5140", overlay_text_color: "#FFF", overlay_color: "#6f5140" });
    });

FYI, I've used the ff library:
Image caption script (jquery): http://code.google.com/p/jquery-imageoverlay/
Wait for all images script (jquery): https://github.com/alexanderdickson/waitForImages/blob/master/README.md

 To see how it actually work, you can look at the ff website: http://kalidadprintsandfavors.com/wedding-invitations/wedding-invitations