how to add onload event listener to links

[lili21]

export const links = () => [
  {
    rel: 'preload',
    href: styleUrl,
    as: 'style',
    onload: () => conosle.log('loaded')
  }
]

it doesn't work.

[kiliman]

Not supported. Those resources will most likely be loaded before Remix starts anyway.

[lili21]

I want to lazy load some non-critical css. I used to do it by this way

<link rel="preload" href="index.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />

[sergiodxa]

You could add two link tags, one for preload and another with rel stylesheet, that should unblock rendering as the styles are loaded

[lili21]

you mean something like this ?

<link rel="preload" href="https://unpkg.com/@arco-design/[email protected]/dist/css/arco.css" as="style">
<link rel="stylesheet" href="https://unpkg.com/@arco-design/[email protected]/dist/css/arco.css">

it still block rendering.

[tylerscave]

Also curious about this... Any other ideas?

[gitaugakwa]

Any update on this?

[sergiodxa]

With React v19 LinksFunction is most likely not going to be needed anymore as you can render tags anywhere and React will move them to the head now.

[ben-wfp]

I have a little pattern which works for me. First add a data attribute to the link tag like

<link rel="stylesheet" href="/styles.css" media="all" data-async-style="true">

then update the links in an effect, applying the styles:

  useEffect(() => {
    const asyncLinks = document.querySelectorAll('link[data-async-style]');

    asyncLinks.forEach(link => link.setAttribute('media', 'all'));
  }, []);