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

• martonx veterán

  #7455

  #7452 K1nG HuNp

  2019-10-25 10:53:40

  Ú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

  

  martonx

  veterán

  #7452 K1nG HuNp

  #7452 K1nG HuNp

  most vagy 3 honap kihagyas utan volt alkalmam leulni az egyik kis hazi projektemhez es feltunt egy dolog instant amin eddig sosem gondolkodtam / nincs ra megoldasom hirtelen.

  adott egy kereses page ami egy adott apiban keres, talalat eseten betolti az adott cumokat. van egy szep skeleton animaciom mert ugye elore tudom milyen kontenerekben lesz a szoveg meg a kep stb. a problemam az, hogy pl egy keresesi talalatban van 5 sor szoveg meg 1 kep, ekkor mivel az adat valojaban mar megjott az apitol a toltes state offolodik, megjelenik a content, viszont a contentben a kep mint egy <img src"..."> szerepel, ami most elkezd tolteni.

  mit kellene csinalnom, hogy az eredeti toltes magaba foglalja az adott kepek bevarasat is?

  szerk:
  ja amugy igen, Vue.js, a state alapjan jelenik meg vagy a tolto komponens vagy a rendes. apitol amikor a fetch lekeri az adatot akkor sima isLoading = false, a szoveg szepen meg is jelenik, a kepek viszont most hogy lassu volt a netem, meg vartak vagy 2 mp-t es emiatt ugye full feherseg volt a helyukon.

  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).

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