No loading of images when using appendScroll in non-visible area

dkern / jquery.lazy

A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.

http://jquery.eisbehr.de/lazy

Other

1.02k stars 236 forks source link

No loading of images when using appendScroll in non-visible area #164

Closed four-bytes-robby closed 5 years ago

four-bytes-robby commented 6 years ago

Reproduction:

Use page http://jquery.eisbehr.de/lazy/example_elements-inside-a-container
Switch for example to mobile view in Chrome
Load page with position most top (just press enter to reload page
Because images are outside of visible area it seems that initial loading is not fired
But when scrolling to this section the images are also not loaded

Fix would be to have appendScroll not fire scrolling only for the container it is attached but still keep the event handler for window scroll event.

four-bytes-robby commented 6 years ago

Workaround:

scrollableContainer = $(".scrollableContainer");
scrollableContainer.find(".lazy").Lazy({
    appendScroll: scrollableContainer.add($(window))
});

dkern commented 6 years ago

Interesting. Yes, that is truly a limitation. No idea right now how to genuine fix this issue. I will leave this open. Thank you for the feedback.

Okipa commented 5 years ago

Hi there, I have a side-menu with lazy image on it and the behaviour is wrong : images are not loaded when I show the menu (not detected).
It would be cool if we could have a refresh method in order to tell to the library to check again in the given element if some image have not been lazy-loaded.
I tried the workaround above and the afterLoad event is never triggered.

dkern commented 5 years ago

The behavior is not wrong @Okipa . Lazy only listens to scroll events by default, so opening a menu is not detected in any way by Lazy. That's nothing wrong, it's just how it should be. You need to tell Lazy if you updated the viewport in any way.

And there is a bunch of public functions to control Lazy and load images you put in viewport. In this case, it's called update instead of refresh. ;)

Okipa commented 5 years ago

Make sense ! I'll check that. Thanks for your reply.