Defining "visible" for a lazy loaded frame

1

The docs around lazy loading say the following:

the content is not loaded from src until the frame is visible.

However, I think I must be misunderstanding this code. If I have a turbo-frame inside of a hidden div the request still fires.

Does anyone know the specific criteria used to determine visible vs not? I trying to shift through the source code, but couldn’t find anything.

1 Like
2

The lazy loading on turbo frames works the same as on images and iframes, it loads once the user scrolls near the element. So if it’s in a scroll view it would start the request regardless of css.

I suggest using an empty turbo-frame instead of the hidden div and then populating it with content when needed.

<%= link_to "Fill frame data", "/my-path-for-data", data: { turbo_frame: "my-empty-frame" }

<%= turbo_frame_tag "my-empty-frame" %>

When the user clicks the link it will load inside of the frame

1 Like
3

Do you happen to know where in the code base that logic lives? When I’ve been testing this out, I have not been able to find any distance (even thousands of pixels below the fold) which delays the loading.