search

airfranceklm / ng-lazy-image

Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.
http://afklm.github.io/ng-lazy-image/
MIT License
351 stars 64 forks source link

afkl-image-container bigger than window size problem #41

Closed smnbbrv closed 8 years ago

smnbbrv commented 8 years ago

Hello, first of all - great library!

Now let's come to the problem I face with my requirements. Assume the container with afkl-image-container directive be bigger than window size. So you have two scrollable elements: window and container.

Then the images which are visible on initial load are loaded - that is correct.

The images which should become visible when I scroll window are not initially loaded - that is correct and even more than your library promises.

When I scroll window the images above are still not loaded - that is not correct.

Then if I scroll the container with afkl-image-container, the images above are loaded - that is correct.

In other words, when the part of container is going outside of the window, the images (inside the container but currently outside of the window) are not loaded (which is good) but that part is not being loaded when window is scrolled (which is not good) until I scroll the container.

As I understand it has something to do with the scroll event listener. Seems if afkl-image-container is configured only this container's scroll is listened, although visibility validation is done according to both scrolls.

SquadraCorse commented 8 years ago

http://afklm.github.io/ng-lazy-image/sample-scrollable.html

if you make window size smaller then container size it will lazy load the image when you scroll inside the lazy container if you scroll on window you will go to the next visible element. The scroll container should only be used if you have scrollable containers inside scrollable window.

smnbbrv commented 8 years ago

@SquadraCorse, this is exactly my case, I have a scrollable element inside of a scrollable window. But the example you give cannot reproduce the problem because your container cannot have more than one image displayed at once and it does not have initial images. Problem is that I have a list of 100-pixel high images and the container height is big enough to have more than 20 of them. Then 10 of these images is fitting the window size and is displayed when other 10 which are fitting container but not fitting the window is not loaded when I scroll the window down...