javascript / intermediate
Snippet
Lazy Loading with Deferrable Views
@defer allows you to declaratively lazy-load parts of your template. Using 'on viewport' triggers the download and rendering only when the element scrolls into view, significantly improving initial load performance.
snippet.js
javascript
1
2
3
4
5
@defer (on viewport) {<large-chart-component />} @placeholder {<div>Loading chart...</div>}
angular
Breakdown
1
@defer (on viewport) {
Defines a block that is loaded asynchronously once it enters the user's viewport.
2
} @placeholder {
Specifies content to show while the deferred block is being fetched.