How to dynamically load an Image into a TableView when its row/cell becomes visible?

Question

Hi,
I am building an application that shows tables with large amounts of data containing columns that should display a thumbnail. However, this thumbnail is supposed to be loaded in the background lazily, when a row becomes visible because it is computationally too expensive to to this when the model data is loaded and typically not necessary to retrieve the thumbnail for all data that is in the table.
I have done the exact same thing in the past in a Swing application by doing this:
Whenever the model has changed or the vertical scrollbar has moved:
- Render a placeholder image in the custom cell renderer for this JTable if no image is available in the model object representing the corresponding row
- Compute the visible rows by using getVisibleRect and rowAtPoint methods in JTable
- Start a background thread that retrieves the image for the given rows and sets the resulting BufferedImage in a custom Model Object that was used in the TableModel (if not already there because of an earlier run)
- Fire a corresponding model change event in the EDT whenever an image has been retrieved in the background thread so the row is rendered again
Btw. the field in the model class holding the BufferedImage was a weak reference in this case so the memory can be reclaimed as needed by the application.
What is the best way to achieve this behaviour using a JFX TableView? I have so far failed to find anything in the API to retrieve the visible items/rows. Is there a completely different approach available/required that uses the Cell API? I fail to see it so far.
Thanks in advance for any hints here.

Answer 1

Here’s what I have tried so far:
I have defined a property in my model object that contains a weak reference to the image that is expensive to load. I have modeled that reference as an inner class to the object so I have a reference to its enclosing object. That is necessary because my cell factory otherwise has no access to the enclosing model object, which it needs to trigger loading the image in the background.
The remaining problems I have is, that I don’t have sufficient control over the loading process, i.e. I need to delay the loading process until scrolling has stopped and abort it as soon as the user starts scrolling again and the visible content changes. Imagine that loading an image for a table row (e.g. a thumbnail for a video) takes 200ms to load and a user quickly scrolls through a few hundred records and then stops. With my current set-up, the user has to wait for all loading processes that were triggered in the cell factories to finish until the thumbnails of the records they are looking at will appear (imagine an application like finder to be implemented like that, it would simply suck UX-wise). In my swing application a background thread that loads images for the visible records is triggered with a delay and stopped as soon as the visible content changes. This works well enough for a good user experience. I don’t see how I can do this based on the cell API. It is nice to have all this abstracted away but in this case I do not see how I can achieve the same user experience as in my swing application.
I also tried registering a change listener to the TreeCell’s visible property to make that control the image loading but I don’t seem to get any change events at all when I do that.
I must be missing something.