afterLoad event not always triggered on background-images

[dominicht]

I'm using this plugin to lazy load <img> and background images. I use the afterLoad event to add a class to the element so that I can trigger some CSS animation. This works fine most of the time (about 90% of the time), but here and there the event simply doesn't get triggered at all on some elements, even after successfully loading the image.

So far, this seems to be only an issue with background images.

This is the code I'm using:

$('.lazy').Lazy({
    threshold: $(window).width() > 767 ? 500 : 50,
    afterLoad: function(element) {
        element.addClass('lazy-loaded');
    }
  });

Update I wanted to a quick ugly workaround with beforeLoad and realized beforeLoad also doesn't get triggered here and there. It seems like all the events/callbacks aren't working properly with background images.

I also noticed that when the issue happens and I have a full row of multiple elements with background images, the full row won't have the events triggered. It seems to be an issue related to the viewport more than a single element.

[dkern]

I need to check this.

[yCodeTech]

I have a similar issue where the afterLoad callback doesn't trigger ALL the time. But my problem occurs on normal <img>'s.

The internal fadeIn effect clashes with my CSS transition, so I've had to apply a CSS opacity: 0; to my img, and then set the opacity with a transitioning effect of my own using the afterLoad callback so that the background colour of the parent container is visible through the image.

There is no reason why the callback occasionally doesn't work, it should work ALL the time with ALL lazy images.

afterLoad: function (element) {
	$(element).css("opacity", 0.1);
}

CSS:

.lazy {
    opacity: 0;
    transition: opacity 1s;
}