Poskakování layoutu při pomalém načítání

9. 2. 2022 21:52:29

Ahoj, jak řešíte aby Vám neposkakoval layout (díky obrázkům) při pomalém načítání webu. Obrázkům jsem sice nastavil "width" a "height", ale pri vykresleni to min. vysku obrazku nerespektuje.

A trik s "padding-bottom" v % delat nechci. Jak to resite vy?

Diky

9. 2. 2022 21:52:29

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497889

TomasX

(4 hodnocení)

9. 2. 2022 23:44:48

Můžeš použít nějakou lazy loading knihovnu, které to často řeší za tebe.

Proč nechceš použít wrapper s padding-bottom v %? To řeší elegantně problém skákání u responzivních obrázků, pokud nepotřebuješ responzivní obrázky, můžeš využít buď wrapper s pevnou velikost a overflow nebo nastavit pro img element min-height na velikost obrázku, to myslím ještě funguje také všude.

9. 2. 2022 23:44:48

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497888

Webarx

10. 2. 2022 07:38:13

Co takhle min-height na parent element? I tak, nevim proc by to width a height primo u IMG nemelo brat v potaz. Kdo vi jeslti si to tam pres CSS nejak nerusite.

10. 2. 2022 07:38:13

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497887

Smazaný účet sqUiEH5lPC

(11 hodnocení)

10. 2. 2022 13:29:51

Napsal TomášX;1640018
Můžeš použít nějakou lazy loading knihovnu, které to často řeší za tebe.

Proč nechceš použít wrapper s padding-bottom v %? To řeší elegantně problém skákání u responzivních obrázků, pokud nepotřebuješ responzivní obrázky, můžeš využít buď wrapper s pevnou velikost a overflow nebo nastavit pro img element min-height na velikost obrázku, to myslím ještě funguje také všude.

Jak je zmíněno zde, tato problematika se řeší hlavně s img lazy loading.

Taky pomáhá udělat z png, jpg obrázků webp

10. 2. 2022 13:29:51

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497886

TomasX

(4 hodnocení)

10. 2. 2022 13:44:26

V dotazu informaci o lazy loading nevidím.

Jak tomu pomáhá webp?

10. 2. 2022 13:44:26

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497885

Smazaný účet sqUiEH5lPC

(11 hodnocení)

10. 2. 2022 13:53:46

Snizuje to velikost a zrychluje nacitani.

Samozrejme bez poskytnuteho nahledu tezko rict v cem je specificky problem

10. 2. 2022 13:53:46

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497884

Ondřej Váško

10. 2. 2022 21:55:37

Díky za rady. Používám https://github.com/verlok/vanilla-lazyload pro lazy load, tam jsem doplnil pro obrazky "display: block" a funguje dobre.

Hlavni problem je u https://kenwheeler.github.io/slick/ , ktery trva nez se JS vytvori nova struktura podle toho jak pozaduje slider. Tam maji obrazky vysku pri nacitani pouze 21px (ve vysledku maji mit 460px). Zatim jsem vyresil min-height u parenta.

Ale pokud zna nekdo elegantnejsi reseni, necham si poradit.

Diky :-)

10. 2. 2022 21:55:37

https://webtrh.cz/diskuse/poskakovani-layoutu-pri-pomalem-nacitani#reply1497883

Pro odpověď se přihlašte.

Přihlásit