Quick Fix For Getting Called Twice
Paul Irish has a great jQuery plug-in to detect when images are loaded, called imageLoaded. If you've experienced problems detecting cached image loads, then you probably need to check out this great script. I have been experiencing a few quirks with it though. And one of the those seems to be that it gets called twice on occasion. But I think I figured out why.
I think what's happening, is it's firing the load event on both the data uri (for the blank gif) and then for the real image source. To stop this from happening, all we need to do is check the image src before we handle the callback. Here's the fix I came up with:
The Code
(function ($) { $.fn.imagesLoaded = function (callback) { var elems = this.filter('img'), len = elems.length, // data uri bypasses webkit log warning (thx doug jones (cjboco)) blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; elems.bind('load', function () { // check image src to prevent firing twice (thx doug jones (cjboco)) if (--len <= 0 && this.src !== blank) { callback.call(elems, this); } }).each(function () { // cached images don't fire load sometimes, so we reset src. if (this.complete || this.complete === undefined) { var src = this.src; // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f this.src = blank; this.src = src; } }); };}(jQuery));By the way, who is that cool guy Doug Jones that recommended the data uri in the first place!
Edit: I merged the src check for the callback with the len check for simplicity. Paul has also updated his version as well.
