Reputation: 25
This is the sample html structure:
<div class=container>
<div class=green></div>
<div class=green></div>
<div class=green></div>
<div class=green></div>
</div>
The below code works:
$('.container').imagesLoaded(function(){
$('.green').find('img').fadeIn(444);
});
The only drawback is that it waits for all images loaded, then fades them in at the same time. How can i make each images load as soon as it has finished loading instead of waiting for all of them to load.
I have tried this but it does not work:
$('.green').imagesLoaded(function(){
$(this).find('img').fadeIn(444);
});
Upvotes: 1
Views: 1013
Reputation: 4778
I have had the same problem and found you need to bind the imagesLoaded plugin to .green
inside of an .each()
method like so:
$('.container').find('.green').each(function () {
var _this = $(this);
_this.imagesLoaded(function () {
_this.find('img').fadeIn(444);
});
});
Upvotes: 1
Reputation: 100205
try something like::
jQuery.fn.eachLoaded = function(fn){
return this.each(function(){
// if already loaded call callback
if (this.complete || this.readyState == 'complete'){
fn.call(this);
} else { // otherwise bind onload event
$(this).load(fn);
}
});
}
$('.green img').eachLoaded(function(){
$(this).fadeIn(444)
});
Upvotes: 0
Reputation: 2246
Yeah, this is typically a fairly basic problem: some images finish loading before you've assigned them a load event handler. This is especially likely when the images are cached.
If the images are in the HTML the only reliable way is, unfortunately, to include an (extremely ugly) inline onload attribute:
<img src="..." alt="..." onload="$(this).fadeIn();">
Upvotes: 0