Smart Prefetch Demo
Hover to prefetch, click to load instantly:
Demo
HTML
TS
SCSS
Defer Block Example 8: Multiple Triggers & Prefetch Strategy
This example demonstrates combining multiple triggers with prefetch strategy for optimal performance. Content is prefetched on hover but loaded on interaction, providing instant response when clicked.
This card uses advanced defer strategies:
- Prefetch on hover: Downloads resources when you hover
- Load on interaction: Displays content when you click
- Multiple fallbacks: Timer as backup trigger
Hover over the card above to prefetch content, then click to load instantly...
More Prefetch Patterns
@defer (on interaction; prefetch on hover)Perfect for product details and cart interactions
@defer (on viewport; prefetch on idle)Load when visible, prefetch when browser is idle