.on('src:before') is only running function on scroll

[Jay Collett]

Hi,

I have the following code:

instance
    .on('src:before', image => {
        image.addEventListener('load', event => {
            console.log('image loaded')
        })
    })

And when I'm scrolling "image loaded" appears in my console. Cashback!

However, when I load the page and the image is already in the viewport it doesn't run the above call. Any advice on how to solve this?

My aim to apply some filter: blur(10px); CSS while it is showing the first image before loading, then when the regular/retina image is loaded, remove it.

EDIT: However, it appears that there is just a long delay between updating the image (which is pretty instantaneous and the above code running.

Thanks,
Jay

[Michael Cavalea]

@JayBox325 you need to call check when your instance is created - this ensures elements within the initial viewport are loaded immediately.

See the example code here. More in the examples folder.