JavaScript topic - Fototrend Hozzászólások

LOGOUT témák

PROHARDVER! témák

Mobilarena témák

IT café témák

GAMEPOD témák

Fototrend

Frissítve: 2014-02-25 10:20 Téma összefoglaló

Fototrend

JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)

Új hozzászólás Aktív témák

K1nG HuNp őstag

#7460
#7455 martonx
2019-10-25 16:30:55

Új Válasz
Új hozzászólás
Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

K1nG HuNp

őstag

#7455 martonx

#7455 martonx
Képek töltésének figyelése helyett azt szokták csinálni, hogy minden képhez beállítasz egy placeholder-t, és amíg nem érkezik meg a kép, addig az jelenik meg. Persze ez is csak kerülő megoldás. Lazy load-olt képeknél ez elég általános.
Másik bonyolultabb ötletem, hogy minden egyes képre csinálsz egy komponenst, azon belül figyelve az adott kép onload eventjét. Amikor a kép betöltött, akkor a kép komponens státuszát loadingról loadedre váltod. Kívül pedig azt figyeled, hogy minden kép komponensed loaded lett-e (bár persze, mi van, ha egy kép valóban hiányzik), és a szülő státusza csak akkor lesz loaded, ha a képek is loaded-ok.
De szerintem ez egy rakás bohóckodás csak azért, hogy mindenáron vuejs-en belül tarts mindent, miközben az egyszerű megoldásom vuejs nélkül css-ből megoldja az adott problémát és még a UX is rendben lesz, mert hamarabb megjelennek a találatok, a képek meg majd ahogy jönnek lecserélgetik a placeholdereket (ha meg 404-el jön egy-egy kép, akkor marad a placeholder).

adott volt eddig is 2 komponens, egy placeholder amiben van placeholder kep, szoveg stb, meg a sima eredeti komponens. problema az volt hogy addig volt a placeholder mutatva amig megjott apibol az adat. ezek utan egybol atvaltott rendes komponensre, de ugye itt meg a linkelt kepek nem toltottek be.
na mindegy kicsit hacky lett mert eddig szepen lefele folyt a data, a state is egyertlemu helyen volt, most viszont a child (eddig buta) komponensnek is felfele kell szolnia, hogy minden kep kesz es csak ezutan allitja a parent is a loadingot falsera.
csak ugye egy kep addig nem tolt amig nem visible, ergo v-ifelve sosem lesz jo, css visibility: hidden kellett neki.
vegeredmeny am: https://booktrckr.firebaseapp.com/search