LazyLoad not always loading properly

[JohnnyMcWeed]

What steps will reproduce the problem?

When using the LazyLoad widget, the images are not always loading as expected. They appear when resizing the window, but that's not a good solution.

What is the expected result?

Proper image loading.

What do you get instead?

Not loading as expected

[nadar]

@JohnnyMcWeed Could you provide more informations? In which situations is the image NOT loading? @TheMaaarc is there a debug mode or what more infos could he provide to help us improve the lazy loader?

[TheMaaarc]

I guess we could add a debug flag.
We collect the image boundaries on load and on resize – I'm guessing that the offsets we collect on load aren't correct.

@JohnnyMcWeed If you have code that changes the position after load, you can call $.lazyLoad('refetchElements'); to update the elements.

I will take some time and update the whole lazyload script, there are a few things I can improve.

[JohnnyMcWeed]

Thanks for your reply. Didn't have the time to look further into this yet.

@TheMaaarc nice, thank you! should probably work with this. I guess it's coming from other JS and the position change. I'll try it :) What I've just seen: HTML Validator seems to have problems with the img tag, as it doesn't have a default src value at the beginning. Maybe we could add a non visible one pixel element or so which gets replaced. Error: Element img is missing required attribute src (Just as input if you're looking into it anyway :) )

[TheMaaarc]

Well, that escalated quite a bit. We now use the IntersectionObserver API. It makes the whole thing more performant and responsive.

@JohnnyMcWeed If the HTML validation is an issue for you, you can solve it by adding the src attribute in options:

<?= LazyLoad::widget([
    'options' => [
        'src' => 'https://url.to/1-pixel.gif'
    ]
]) ?>

It shouldn't be visible in the beginning and get replaced as soon as the correct image is loaded.