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, ...

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
Post a Comment