Lazy-loading views with the src attribute

This is the recommended approach if you plan to build more complex UIs with several interchangeable views.

fx-switch cannot just be used for tabcontainers but can manage a set of views and lazy-load them as needed.

Using the src on fx-case has two effects:

• it loads the activated case only when it becomes activated (lazy-loading)
• it loads the content from an external HTML page which may either just be the snippet or a full standalone page. By default the first fx-case element will be selected but you can specify a CSS selector to fetch a specific target from that page.

By styling a switch to take the full viewport you can easily build a bare-bone Single-Page-Application (SPA) where the host page is only loaded once and views are swapped in and out as needed.

Using this technique also allows to split up big pages into chunks making them easier to extend and maintain.

The first case will always be displayed and resolved by default. If you inspect the page right after loading you will notice that the cases 'one', 'two', 'three' won't have been loaded yet.

Markup of current page:

The home view is what you're looking at. See the other pages for details.

only seen if page1.html fails to load.