Media
Działające przykłady optymalizowanych obrazów, zasobów publicznych i odbioru pliku przez formularz.
fill i kadrowanie
Ten sam lab.jpg wypełnia kontener o stałej wysokości. fill wiąże rozmiar obrazu z rodzicem, a object-cover kadruje nadmiar obrazu. Po przewinięciu strona pokazuje osobny przykład lazy loading.
Zakres demonstracji
- next/image
- fill
- object-cover
- relative
- IntersectionObserver
- lazy loading
Przewijaj w dół↓ ↓
Ładowanie po wejściu do viewportu
IntersectionObserver renderuje monet.jpg dopiero po wejściu tej sekcji do viewportu. Dzięki temu nowe żądanie jest widoczne w karcie Network po przewinięciu strony.
Obraz nie został jeszcze wyrenderowany.