Image already loaded via LazyLoad.load() still fires original callback_loaded when image comes into view

[nick-vincent]

Describe the bug

When an offscreen image is loaded early with LazyLoad.load(img), the original callback_loaded from the LazyLoad(settings) constructor is not fired.

(Perhaps this is the expected behavior, and you must pass in a new callback_loaded via LazyLoad.load(img, settings)?)

However, if you do pass a new callback into LazyLoad.load(), the new callback is fired when the image loads, but the original callback (from the constructor) is still fired when you scroll to the element.

To Reproduce

1. Go to https://codepen.io/thenickvincent/pen/xxqgrRm
2. Open the CodePen console to observe the callbacks
3. Click on 'Load image' button
4. See the new callback fire
5. Scroll down to the loaded image
6. See the original callback fire

Expected behavior

• If a new callback is NOT passed into LazyLoad.load(), I would expect the original callback to fire
• If a new callback IS passed into LazyLoad.load(), I would expect it to "overwrite" the original callback, and I would NOT expect the original callback to also fire later when the image scrolls into view.

LazyLoad version

• Version 17.3.1

Desktop (please complete the following information):

• OS: macOS Big Sur
• Browsers:
  • Chrome 90.0.4430.212
  • Safari 14.1
  • Firefox 88.0.1
  • Edge 90.0.818.62

[verlok]

Hey @nick-vincent
thank you for reporting this.

I’ll look into it first thing next week.

[verlok]

Very well written issue by the way, thank you @nick-vincent!

[verlok]

Well, the thing is that the LazyLoad.load() is a static method, so it can be fired without having an instance of the LazyLoad object, and it's supposed to be used like that.

So there is no way to tell the script "if the callback has been passed to the load() options, ignore the options of the lazyload instance", because there shouldn't be an instance, or there could be many of them.

The strange thing here is that the main LazyLoad instance is triggering the "start image loading" again, instead of recognizing that the image has been already loaded by the load() method.

So I would work to make sure the image loaded with the load() methos is marked as loaded and then ignored by the main LazyLoad instance.

Would this resolution satisfy your needs?

[verlok]

Closed with the release of 17.3.2.
Let me know what you think!

[nick-vincent]

Hi @verlok!

Sounds like the fix you landed on is correct: don't try to load an image that's already been loaded. 😬

Appreciate your detailed response, and thanks for addressing the issue so quickly!

[verlok]

Hey @nick-vincent ,
I’m glad this solved your specific issue.

If you’re happy with my support, the documentation and the effort I’ve been putting on this project in the latest years, I hope you might want to buy me a coffee to show your appreciation. Or sponsor me, if you're a fan.

Open-source software is great for everyone, but it takes passion and time to grow and evolve.

Thank you for thinking about it.

Have a nice day and beginning of the upcoming week!