Callback support

[Inge Brattaas]

Is it possible to add support for passing a callback function to fire after each image is changed? I'm hiding all images using object-fit in non-supported browsers, with opacity 0 in CSS, and manually set the opacity to 1 after running the script - which I would like to do in the callback.

[Federico Brigante]

How do you mark which images use object-fit? Are you using a class?

You can probably already do

objectFitImages('.your-class');
$('.your-class').css('opacity', 1);

objectFitImages is synchronous so wherever you call it you can directly also set the opacity to 1

[Federico Brigante]

Here's a IE10+ CSS-only solution:

@keyframes fadein { /* needs prefixes */
    from {
        opacity: 0;
    }
}
img {
    object-fit: cover;
    font-family: 'object-fit: cover';
    animation: fadein 1s backwards paused;
}
img[src^="data:"] {
    animation-play-state: running;
}