HTML oldal képek betöltése

HTML oldal képek betöltése
2013-07-22T00:21:54+02:00
2013-07-22T13:34:51+02:00
2022-11-29T10:40:37+01:00
slashtrium
Sziasztok!

Készítettem egy weboldalt, a problémám a következő: egy darab index fájlból áll az egész, a menürendszer jquerys, tehát az összesen 5 darab menü (galéria, kapcsolat, ilyesmik) mind az index.php-val együtt töltődnek be. Na már most, a galéria menümben körülbelül 100 képet kell megjelentetnem, természetesen thumbnailoztam mindet, illetve a minőséget is lejjebb vettem, de így is 25 megát rúg a www könyvtár, és a weboldal nagyon lassú, főleg, mikor ctrl-f5-özöm és betölt az index. Egy jó pár másodpercig szaggat, lassú, nem reagál, gondolom ekkor tölti be a képeket?

Milyen tippeket tudnátok adni arra, hogy ez teljesen megszűnjön?
Mutasd a teljes hozzászólást!
Ezt a "betöltés" panelt nem tudod/szabad időhöz kötni.
Inkább a kis képek betöltését figyeld (onload esemény?), és ha mind megvan akkor tüntesd el.
(Ha tuti nem kell több kép, akkor akár egy nagy képként is letöltheted őket, kicsit biztos gyorsítana.)

Bár én csak annyit töltenék amit szükséges, esetleg a már meglévőket hagynám a memóriába.

Mondjuk ha 100 kis kép kell, ebből mondjuk 6-8 jelenik meg egyszerre, és tudok mondjuk jobbra-balra lapozni. Akkor letölteném az aktuális 8-at, meg az előző-következő 8-at.

Lapozás esetén meg az aktuális irányban lévő következő 8-at. (Feltéve hogy még nincs letöltve)
És itt most a kis képekről van szó.

Ha meg rákattintok egyre akkor töltené a nagy képet.

A megrendelőnek biztos tetszik, de sok látogatót fog veszíteni, ha 5 percig tölt az oldal, mire megjelenik az első lap. Mi lesz akkor, ha 1200 kép lesz az oldalon? Vagy 1 millió?
Vagy 500 oldal szöveg?
A szöveget, egyéb tartalmat is érdemes darabolni és Ajax-al behívni ha kell. Gyors gép/net esetén az is villám gyors lesz.

B változat, hogy megjelenik az oldal, de te a háttérben lassacskán szeded le a többi részét, de úgy, hogy a felhasználót az ne zavarja, tudja olvasni, lapozni ami már lent van.

De gondolj bele akinek adatforgalmi korlátja van, vagy lassú a nete, az hogy fog örülni, hogy "fölöslegesen" töltöget a gép.
Mutasd a teljes hozzászólást!

  • Nem teljesen értettem, hogy mikor mi töltődik be, arra gondolok, hogy example.com-ra az összes tartalom betöltődik csak nem látszik mind... Jól gondolom? Egyébként ha így van akkor mi vezetett erre a megoldásra?

    Chrome/Chromium böngészőnél nyomj F12-őt és találsz egy olyan tabot, hogy "Network" nézd meg, hogy mi mennyi idő alatt töltődik be. Ha az url címsorba entert nyomsz és úgy mérsz, akkor a cacheelt tartalom nem töltődik be újra, tehát töltsd újra az oldalt (F5 vagy Ctrl+r).

    Szerk.
    Az a 100 thumbnail nagyon sok egy oldalra!
    Mutasd a teljes hozzászólást!
  • Pont úgy van, ahogy mondod!
    Egy fájlban van minden, sajna azért így van, mert aki kérte a weboldalt, így akarta. Eleinte PHP switch case megoldással akartam, de hát ez a jquerys dolog neki bejött, mert csilli-villi és viszonylag gyorsan megvolt. Amíg nem tartottam 100 képnél, villámgyorsan töltött...

    Megnézem ezt a chromeosat mindjárt. Amúgy készítettem egy "Betöltés" divet, amit minden elé dobok z-index-szel, és jó 5-6 másodpercig tartogatom és csak aztán tüntetem el szépen, amíg tényleg betöltenek a képek, stb. B tervnek jó lesz...
    Mutasd a teljes hozzászólást!
  • Akkor ez amolyan "One page"?:) Mint amikor klikkelek egy menüpontra és beúszik a tartalom pl. oldalról?

    Akkor viszont tényleg a képek fogják meg, szerintem beszéld meg a megrendelővel, hogy ez a styló nem erre van kitalálva.

    A thumbnail képekkel betöltődik a nagy kép is? Ha igen akkor mindenképp úgy kéne megcsinálnod, hogy ne töltődjön be, hanem amikor klikkel a kis képre akkor js-el előrángatni a nagy képet. Gondolom valami lightboxos és társai megoldással.
    Mutasd a teljes hozzászólást!
  • Bocsi, kicsit késve, kutyát sétáltattam. És ismét eltaláltad. :) Beúszó menük, miegymás...

    Nem, direktben úgy csináltam, hogy csak thumbnail töltődjön be, vagyis thumbnailok, hisz egy kis kép mondjuk 5 kb, míg a large 10x ennyi... És a lightbox nem működött... Ütköztek a jqueryk, vagy tudom is én... Úgyhogy JS-ben írtam egyet, szépen végigfut egy tömbön ami a kép url-eket tárolja, elég pofás lett amúgy, csak nagyon home-made megoldás, ide kellett kis php az egyszerűség miatt... Amúgy mondom, az imént írtam egy ilyen betöltő képernyőszerűséget, ami most 5 másodperc múlva kiúszik.. Csak tudnám, hogy ez jó sebesség-e lassabb gépeken...
    Mutasd a teljes hozzászólást!
  • törölve
    Mutasd a teljes hozzászólást!
  • Ezt a "betöltés" panelt nem tudod/szabad időhöz kötni.
    Inkább a kis képek betöltését figyeld (onload esemény?), és ha mind megvan akkor tüntesd el.
    (Ha tuti nem kell több kép, akkor akár egy nagy képként is letöltheted őket, kicsit biztos gyorsítana.)

    Bár én csak annyit töltenék amit szükséges, esetleg a már meglévőket hagynám a memóriába.

    Mondjuk ha 100 kis kép kell, ebből mondjuk 6-8 jelenik meg egyszerre, és tudok mondjuk jobbra-balra lapozni. Akkor letölteném az aktuális 8-at, meg az előző-következő 8-at.

    Lapozás esetén meg az aktuális irányban lévő következő 8-at. (Feltéve hogy még nincs letöltve)
    És itt most a kis képekről van szó.

    Ha meg rákattintok egyre akkor töltené a nagy képet.

    A megrendelőnek biztos tetszik, de sok látogatót fog veszíteni, ha 5 percig tölt az oldal, mire megjelenik az első lap. Mi lesz akkor, ha 1200 kép lesz az oldalon? Vagy 1 millió?
    Vagy 500 oldal szöveg?
    A szöveget, egyéb tartalmat is érdemes darabolni és Ajax-al behívni ha kell. Gyors gép/net esetén az is villám gyors lesz.

    B változat, hogy megjelenik az oldal, de te a háttérben lassacskán szeded le a többi részét, de úgy, hogy a felhasználót az ne zavarja, tudja olvasni, lapozni ami már lent van.

    De gondolj bele akinek adatforgalmi korlátja van, vagy lassú a nete, az hogy fog örülni, hogy "fölöslegesen" töltöget a gép.
    Mutasd a teljes hozzászólást!
  • Szia!

    Asszem valami ilyesmi kell neked: Lazy Load

    Ha netán összeakadna akkor pedig: no conflict
    Mutasd a teljes hozzászólást!
  • Persze, erre mind gondolok, különben nem "vesztegetném" rá az időt. Nekem viszonylag gyors netem van, de még így is beszaggat az első pár másodpercben az oldal a letöltés miatt. És pont ezen gondolkoztam én is, hogy nem lehet időhöz kötni a betöltés képernyő eltüntetését, mert az egy dolog, hogy nekem 5 másodperc alatt tölt be minden... Másnak már lehet, több. Csak arra nem jöttem még rá, hogy hogy tudom megállapítani, hogy minden kiskép betöltött már.
    Mutasd a teljes hozzászólást!
  • Lehet bonyolítom, de létrehoznék egy tömböt kezdetben feltöltve nullákkal. Minden képnél az onload eseménynél a hozzá tartozó tömbelemet 1-re állítanám.

    Valahová meg be kell illeszteni egy vizsgálatot. Ha minden tömbelem 1 lett, akkor eltüntetni a "loading.." képernyőt.

    B változat, hogy egy változót nullázol. Minden onlad-nál növeled az értékét egyel, és ha az értéke elérte a képek számát, akkor tünteted el a panelt.
    Elméletileg működnie kell.

    Vagy mondjuk másodpercenként megvizsgálod a képeket, biztos le lehet kérdezni, hogy létezik vagy sem.
    Mutasd a teljes hozzászólást!
  • Csináltam is így egy csinos megoldást. Ez az időhöz kötés tényleg hülyeség volt. De ez így vajon mennyire korrekt? Sajna a fenti jquery plugin nem nagyon működött, eleve nem görgetős az oldal. :( Biztos lehetne valahogy moddolgatni, hogy itt is működjön, de ennyire nem értek hozzá.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd