Lazy load Javascript. Example: Joyful animations

[guettli]

I want to keep the amount of additional JS small for the initial page load.

Later I might need additional libraries. For example confetti-canvas (see below Stackoverflow question).

It would be very cool if JavaScript libraries could get loaded lazy via hx-get or hx-post.

Steps:

1. Initial page load confetti.js does not get loaded yet
2. User does some action via hx-post
3. hx-post response comes from the server to the client. It somehow contains an URL pointing to the JS code
4. htmx loads the JS code
5. a method gets called which uses the JS code
6. Joyful confetti and amazed customer

Related StackOverflow issue: https://stackoverflow.com/a/67109472/633961

[Tindome]

i've achieve such a result by using depp or fetch-inject and a bit of htmx events to dynamically load component stuff from an injected page

[timtebeek]

Could you expand on that a bit @Tindome ? Would be nice to have your approach documented here at least.

[gone]

is another way to ask this: Load script tags when included in htmx response

[magiconair]

What happens to the library in the browser after the fragment got replaced? We are thinking of building a large composable frontend where potentially lots of small JS libraries might be loaded over time. Will the browser unload them once they are no longer used? Is that even possible?