-
-
Save paulirish/268257 to your computer and use it in GitHub Desktop.
// $('img.photo',this).imagesLoaded(myFunction) | |
// execute a callback when all images have loaded. | |
// needed because .load() doesn't work on cached images | |
// mit license. paul irish. 2010. | |
// webkit fix from Oren Solomianik. thx! | |
// callback function is passed the last image to load | |
// as an argument, and the collection as `this` | |
$.fn.imagesLoaded = function(callback){ | |
var elems = this.filter('img'), | |
len = elems.length, | |
blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; | |
elems.bind('load.imgloaded',function(){ | |
if (--len <= 0 && this.src !== blank){ | |
elems.unbind('load.imgloaded'); | |
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 | |
// data uri bypasses webkit log warning (thx doug jones) | |
this.src = blank; | |
this.src = src; | |
} | |
}); | |
return this; | |
}; |
@ksykulev - maybe add it after "this.src = src"?
@cjboco - After some testing:
Putting the unbind after the "this.src = src" unbinds the load event too fast and it doesn't get called..
Putting the unbind in the conditional seems to be working OK.
elems.bind('load.imagesLoaded',function(){
if (--len <= 0 && this.src !== blank){ elems.unbind('load.imagesLoaded'); callback.call(elems,this); }
}
@cjboco - Thanks for your help!
hey guys
mr @desandro has picked up this script and given it a proper repo as a home:
https://github.com/desandro/imagesloaded
I've added the namespaced events to my gist above as that seems like a good idea. but in general, david's version is the new canonical one
ok, its a cached images solution for webkit? but its simpler by checking width or height after loading event:
img.addEventListener("load", function()
{
var tmrLoaded = window.setInterval(function()
{
if (img.width)
{
window.clearInterval(tmrLoaded);
alert( "its done!");
}
}, 100);
}, false);
Greetz
nice! i'm using this here -> https://github.com/ahoward/jquery.bires
Yes that does break it in webkit, scratch that
Only way around that is to break the cache:
src + ?_="+(new Date().getTime())
:(
Thanks for pointing that out.
Could the unbinding happen inside the callback after all the images have loaded?
elems.bind('load.imagesLoaded',function(){
if (--len <= 0 && this.src !== blank){ elems.unbind('load.imagesLoaded'); callback.call(elems,this); }
}