Step 15: Loading All Cards Issue
The Problem
Loading all cards at once can cause performance issues, especially with many items. This creates:
Issues:
- Large initial payload
- Slow initial render
- Unnecessary memory usage
- Poor performance on mobile devices
Problematic Code:
<div class="cards-container">
@for (card of cards; track card.id) {
<div class="card">
<img [ngSrc]="card.imageUrl">
</div>
}
</div>
Scroll down slowly and watch the network tab. Notice how all images are loaded immediately, even those not in view.
Total Cards: 100
All cards are loaded and rendered immediately!
Card 1
Loaded immediately with page
Card 2
Loaded immediately with page
Card 3
Loaded immediately with page
Card 4
Loaded immediately with page
Card 5
Loaded immediately with page
Card 6
Loaded immediately with page
Card 7
Loaded immediately with page
Card 8
Loaded immediately with page
Card 9
Loaded immediately with page
Card 10
Loaded immediately with page
Card 11
Loaded immediately with page
Card 12
Loaded immediately with page
Card 13
Loaded immediately with page
Card 14
Loaded immediately with page
Card 15
Loaded immediately with page
Card 16
Loaded immediately with page
Card 17
Loaded immediately with page
Card 18
Loaded immediately with page
Card 19
Loaded immediately with page
Card 20
Loaded immediately with page
Card 21
Loaded immediately with page
Card 22
Loaded immediately with page
Card 23
Loaded immediately with page
Card 24
Loaded immediately with page
Card 25
Loaded immediately with page
Card 26
Loaded immediately with page
Card 27
Loaded immediately with page
Card 28
Loaded immediately with page
Card 29
Loaded immediately with page
Card 30
Loaded immediately with page
Card 31
Loaded immediately with page
Card 32
Loaded immediately with page
Card 33
Loaded immediately with page
Card 34
Loaded immediately with page
Card 35
Loaded immediately with page
Card 36
Loaded immediately with page
Card 37
Loaded immediately with page
Card 38
Loaded immediately with page
Card 39
Loaded immediately with page
Card 40
Loaded immediately with page
Card 41
Loaded immediately with page
Card 42
Loaded immediately with page
Card 43
Loaded immediately with page
Card 44
Loaded immediately with page
Card 45
Loaded immediately with page
Card 46
Loaded immediately with page
Card 47
Loaded immediately with page
Card 48
Loaded immediately with page
Card 49
Loaded immediately with page
Card 50
Loaded immediately with page
Card 51
Loaded immediately with page
Card 52
Loaded immediately with page
Card 53
Loaded immediately with page
Card 54
Loaded immediately with page
Card 55
Loaded immediately with page
Card 56
Loaded immediately with page
Card 57
Loaded immediately with page
Card 58
Loaded immediately with page
Card 59
Loaded immediately with page
Card 60
Loaded immediately with page
Card 61
Loaded immediately with page
Card 62
Loaded immediately with page
Card 63
Loaded immediately with page
Card 64
Loaded immediately with page
Card 65
Loaded immediately with page
Card 66
Loaded immediately with page
Card 67
Loaded immediately with page
Card 68
Loaded immediately with page
Card 69
Loaded immediately with page
Card 70
Loaded immediately with page
Card 71
Loaded immediately with page
Card 72
Loaded immediately with page
Card 73
Loaded immediately with page
Card 74
Loaded immediately with page
Card 75
Loaded immediately with page
Card 76
Loaded immediately with page
Card 77
Loaded immediately with page
Card 78
Loaded immediately with page
Card 79
Loaded immediately with page
Card 80
Loaded immediately with page
Card 81
Loaded immediately with page
Card 82
Loaded immediately with page
Card 83
Loaded immediately with page
Card 84
Loaded immediately with page
Card 85
Loaded immediately with page
Card 86
Loaded immediately with page
Card 87
Loaded immediately with page
Card 88
Loaded immediately with page
Card 89
Loaded immediately with page
Card 90
Loaded immediately with page
Card 91
Loaded immediately with page
Card 92
Loaded immediately with page
Card 93
Loaded immediately with page
Card 94
Loaded immediately with page
Card 95
Loaded immediately with page
Card 96
Loaded immediately with page
Card 97
Loaded immediately with page
Card 98
Loaded immediately with page
Card 99
Loaded immediately with page
Card 100
Loaded immediately with page