** Question ** Use in each image independly?

[zzseba78]

Hi! First of all, amazing plugin, thanks for your work.

I want to implement this in each image or background image. So, as soon as the background image of each block in collection of elements ( same class for example ) loads, it add a class and animate the opacity with css ( fade In ). Is this possible?

Thanks!

[desandro]

Yes. use background: true and progress event

[zzseba78]

Amazing! Thanks for your answer @desandro ! I did this and it´s working perfect with Jquery

$('.slide-home').imagesLoaded()
    .progress( function( instance, image ) {
    $(image.img).removeClass('uk-invisible').addClass('uk-animation-fade'); // remove transparent and fade in image
    console.log('image ' + image.img.src + ' loaded');
});

I couldn´t resolve how to achieve this in vainilla javascript, it´s possible? I´m not clear on this since this sencence: .imagesLoaded() returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress().

I can use progress only with jquery? Is there any simple working example? Thanks

[desandro]

Vanilla JS would look like:

var imgLoad = new imagesLoaded('.slide-home');
imgLoad.progress( function( instance, image ) {
  // remove transparent and fade in image
  image.img.classList.remove('uk-invisible');
  image.img.classList.add('uk-animation-fade');
  console.log('image ' + image.img.src + ' loaded');
});

[zzseba78]

Amazing!! Thanks you!!