no

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

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

Related

web 1351571763576456468

Post a Comment Default Comments

Outsourcing

Are you looking for freelancers in the Philippines? Get in touch.

Donations

If you like what I do, you can support this channel by buying me a coffee. I would be grateful for your contribution! Your donations will help me create more FREE online courses and learning materials for programmers and remote workers.

item