search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
37.23k stars 1.26k forks source link

Lazy load Javascript. Example: Joyful animations #447

Open guettli opened 3 years ago

guettli commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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

gone commented 2 years ago

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

magiconair commented 4 months ago

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?