search

lVlyke / lithium-ngx-virtual-scroll

A fast and lightweight virtual scrolling solution for Angular that supports single column lists, grid lists and view caching.
MIT License
23 stars 4 forks source link

img tags in all elements are fetched on page load despite being out of the viewport #21

Closed ghenry22 closed 1 year ago

ghenry22 commented 1 year ago

Testing out this library as an alternative to the ionic virtual scroll that has been deprecated and at first glance all looks good, simple text based items in the list seem to render fast and scroll well. However, when I updated my items to include and image performance goes out the window and the viewport only displays the first 1-2 items then blank space.

If I look at the network requests in dev tools I can see ~2k http requests fired off to load images :) Which is every item in my list.

I suggest deferring img (and probably any other media tag) loading until the item is within the viewport + buffer region.

I tried using the async rendering option with a simple single text line as the placeholder but that doesn't really work either because as soon as the first items in the list render all 2k+ img tags are requested and everything locks up.

ghenry22 commented 1 year ago

Edit: scratch that I thought that Ionic's might work for enabling lazy loading of images but I still see the same behaviour. 2k items visible in the dev tools when inspecting the page with the virtual scroll list, 2k requests to load images fired the instant the page loads.

Shouldn't we be seeing a shorter list of items that gets rotated out as you scroll when looking in dev tools ? This is what I see when working with Ionic old virtual scroll.

It seems like I'm not actually getting any virtual scroll behaviour with this library for some reason?

Ok seems weird but if the li-virtual-scroll component's immediate parent does not have an explicit css value set for height then the component will be infinitely high and that means, all elements are in the dom and all images load at once etc, as per my comment above.

Perhaps li-virtual-scroll could look beyond it's immediate parent to determine the desired max height?

edit again: Weirdly when I put an ion-item (ionic component) inside the virtual list, either inside the list-item div or using the ion-item as the list item, it just blows the list height out and ignores everything above and just loads the whole lot into the dom.

Really no idea what is going on here. If there is any change you could take a look at a quick example using some ion-item components, each with an image in the virtual list I would be curious if you can reproduce the same issues. I'd love to switch over to this virtual scroll implementation as the grid / list switching ability is exactly what I was looking for but when I have everything built on ionic components it's a bit difficult when they don't seem to work properly.

ghenry22 commented 1 year ago

Ok! So I will leave this here in case someone else stumbles over the same issue but I seem to have it working now thanks to a random comment I found in another github repo :)

1) Make sure that the parent element of the li-virtual-scroll has a defined height and width. If you don't set this then the height will be assumed to be infinite and all elements in your list will be loaded into the DOM (ie not virtualscrolling).

2) Make sure that you set [itemHeight} explicitly as an option on the li-virtual-scroll. The docs say it will be auto calculated if not provided. In my testing this worked fine with something basic like a DIV, but as soon as you are using a more complex component (ie ION-ITEM) only 1 item would be rendered. When [itemHeight] is set on the li-virtual-scroll the list appears properly and virtual scrolls as expected! If you are doing grid scrolling make sure to also specify [itemWidth].