In the future, this behavior will be automatic. It will wait when there is no inferred value #3.
It also serve as a way for conditional hydration when the attribute value is specified
[ ] wait="visible" fetch resource once it has entered the viewport. This uses an IntersectionObserver internally to keep track of visibility.
[ ] wait="idle" fetch resource once the page is done with its initial load and the requestIdleCallback event has fired. If you are in a browser that doesn’t support requestIdleCallback, then the document load event is used.
[ ] Listening to media query rules. For example, wait="(max-width: 64rem)" will fetch resource once the viewport width is below 64rem (useful for sidebar toggles and carousel)
[ ] Waiting specific event being triggered. For example, wait="on:click" will fetch resource once any of the elements that listen to event click are clicked (i.e <button on:click>)
Mitigate FOUC (Flash of Unstyled and/or Unscripted Content)
In the future, this behavior will be automatic. It will
waitwhen there is no inferred value #3.It also serve as a way for conditional hydration when the attribute value is specified
wait="visible"fetch resource once it has entered the viewport. This uses an IntersectionObserver internally to keep track of visibility.wait="idle"fetch resource once the page is done with its initial load and therequestIdleCallbackevent has fired. If you are in a browser that doesn’t support requestIdleCallback, then the document load event is used.wait="(max-width: 64rem)"will fetch resource once the viewport width is below 64rem (useful for sidebar toggles and carousel)wait="on:click"will fetch resource once any of the elements that listen to event click are clicked (i.e<button on:click>)