I’m working with a Grid component that dynamically loads media items, including images, titles, and media types. The data for each MediaItem component is provided by the parent component using setters. I’m setting the image source (src) for the texture before the component is attached to the render tree, typically before the _setup or _init hooks.
However, I’m facing an issue: when a key event occurs (like keydown) and the media items enter the viewport, the images don’t appear immediately. It takes about half a second for the images to load. During this short period, the row appears empty with only the titles visible.
I’m looking for a solution to preload the image textures so that the media items enter the viewport with the textures already loaded. How can I achieve this?
Essentially the renderer won’t load images until they are on screen. The boundsMargin increases the size of the “render screen” so images will start to load before they are visible on the screen
Here is the scenario where I want to use it: I have a list containing 10 sub-lists, and each sub-list has around 20-30 items. I want to preload around 5-7 sub-lists and 8-10 items per list.
So, if I want to load 5 sub-lists, should I set top: 500 or bottom: 500? How does this work?