lazyload on container

[akhatri]

This is perhaps a feature request, but is it possible to animate the container that contains the image. e.g.

<div class="image-tile">
<h3>Heading</h3>
    <img class="b-lazy" src="low-res-image.jpg" data-src="image.jpg" />
    <p>some description</p>
</div>

CSS

.b-lazy {
   opacity:0;
   transform: scale(3);
   transition: all 500ms;
}
.b-loaded {
   opacity:1;
   transform: scale(1);
}

If I add the b-lazy class to the image tile container, it doesn't show due to the .b-loaded class being applied only to the image. We can add the .b-loaded to the container through JS but it would be good if it works through the plugin so it offers more flexibility in animating the elements.

[dinbror]

hey @akhatri

I'll add it to the wish list. Right now you will need to add/remove a class in the success callback as you mention.

var bLazy = new Blazy({
    success: function(element){
        var parent = element.parentNode;
        // Removing the class "loading" from parent
        parent.className = parent.className.replace(/\bloading\b/,''); 
    }
});