Vanilla-lazyload: callback_enter not firing when entering viewport

[podrivo]

• What is happening?
  callback_enter is not firing when entering viewport

• What is the expected behaviour?
  callback_enter should be fired only after entering viewport

• Which version of LazyLoad are you using?
  Latest one. Just downloaded from the repo. Version is not included in the file.

• In which browser(s) and browser version(s) are you experiencing the problem?
  Chrome 64.

• Could you provide the HTML, CSS and JS code you use for your images?
  I used the callback demo.

• What are the steps to reproduce the problem?
  Download the callbacks demo. Check console for logs and compare viewport size and image position.

Example:
Viewport has only one image shown, but 2 logs for ENTERED.

Thank you.

[verlok]

Hi @podrivo,
have you checked the value of the threshold option? Its default value is like 300, so the images are considered “inside the viewport” 300px before they actually enter it.

If you want the behavior your describing, please pass the threshold option set to 0.

For example:

new LazyLoad({
  threshold: 0
});

[verlok]

Please let me know if this solved.

[podrivo]

Hmm, but I also need the images to preload and if I set the threshold: 0, images will only be loaded after been inside the viewport.

Maybe remove threshold from callback_enter, as the documentation says:
The distance out of the viewport, expressed in pixel, before which to start loading the images.

[verlok]

Just to recap.

You’re suggesting to use threshold only to determine “how far” from the viewport start loading the images, but make sure that the callback_enter function is called only when the image _actually_ enters the viewport, as if the threshold was zero.

That makes totally sense. But it’s going to take some time because it requires quite a change in the code.

Just to let you and the followers know: now there is only one _viewport management_ and the threshold option _virtually expands_ the viewport. The callback_enter is then fired when the image enters the virtually expanded viewport _and_ the image starts loading. To make this change we’re gonna need to rethink the viewport management.

The first idea that comes to my mind is to manage 2 viewports:

• one virtually expanded by the threshold option, to determine when the images should start loading
• one vith the actual viewport size, only to determine when to call the callback_enter callback

What do you think?

[podrivo]

I think this is a great idea!
This way you'll be able to control what happens when a content jumps in the user viewport and won't mess with the preload.

This will also add a great opportunity to create some "entering" effects with CSS.

[verlok]

Ok I'll start to implement it in version 10, the latest one, where it's easier to do, then I'll implement it in version 8.x if it's possible without making the script huge.

[podrivo]

This is such great news, @verlok!
Can't wait to use it.

[driskell]

@verlok I actually use the callback to lazyload some associated content so would prefer it stays tied to the lazyload behaviour. Any change would impact my usage which I thought was correct.

Maybe this is best as a new callback? Or a new threshold option specific to callback enter that by default copies the threshold value?

[verlok]

@podrivo it’s actually worse than I thought, I need to duplicate a lot of code actually, and I’d need to do it in both version 10 and version 8 which use two very different ways to check viewport entering. That’s why I didn’t still release the fix. The best thing you could do if you need it quick is to implement your own “viewport entering” using IntersectionObserver.

[verlok]

@driskell you’re right, this would be a breaking change. Anyway the callback_enter and the callback_set functions are called at almost the same time, respectively just before and just after setting the src in the image. So if your behavior is not strictly related to the src being set or not, you could use the callback_set and be safer.

[verlok]

Hi @podrivo, I'm assuming you solved as I was suggesting in the comments. If it isn't so, feel free to reopen the issue. Thanks