Preload image textures before entering viewport

Get Help
1

Hi,

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?

2

Hi, could anyone from lightning team give us some help or advice please ?

Many thanks

3

Hi - You want to use boundsMargin Lightning/src/tree/core/ElementCore.d.mts at b25dcc13e13bc74a4a71caff19ce25253e5ffc66 · rdkcentral/Lightning · GitHub

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

1 Like