imagesReady waits until the size of certain images is known, then tells you the maximum width, maximum height, and maximum ratio of height to width of all the images. This is super useful for implementing slideshows and anything else where you need to know the worst case before proceeding, or simply for any situation where you need to be sure of the image dimensions before proceeding. Well-tested back to IE8.
$('.my-images').imagesReady(function(maxWidth, maxHeight, maxHeightToWidth) { // Your code here });
Note that imagesReady will wait for all of the images either matching the selector directly or contained within elements that do match the selector. This is very useful when you wish to wait for all of the images in a slideshow. If you want to match only certain images, though, you can use filters in your selector to be more specific.
The reported sizes are always the true size, regardless of any CSS that may be in effect.
"Why maxHeightToWidth?" This ratio is useful when you are using width: 100% to size images and allowing the height to scale freely. In that situation it is important to know what the greatest height will be, so that you can size a slideshow intelligently to avoid jumpiness when the user scrolls below the slideshow. You can determine this maximum height by multiplying the width of the containing element by maxHeightToWidth.
For a sweet jQuery slideshow plugin that takes advantage of this, check out projector.
You need jQuery, of course. jquery-images-ready is actively supported with jQuery 1.9 and 2.0 but may work with older versions.
jquery-images-ready was created at P'unk Avenue for use in Apostrophe, an open-source content management system built on node.js. If you like jquery-images-ready you should definitely check out apostrophenow.org. Also be sure to visit us on github.
0.1.4: removed dependency on Underscore. Thanks to Kay Stenschke.
Feel free to open issues on github.
