19. august 2003 - 23:06Der er
9 kommentarer og 1 løsning
Preload af billeder til brug som background-image
Hej eksperter.. Jeg prøver at bygge et site op hvor jeg benytter en del background-images for at give mine tables lidt former. Problemet er at det loader i bidder (billede for billede) og det tager tid, og er grimt i forhold til at billederne var vist fra starten da det er baggrund og en del af designet. Det er Gif billeder, men det tager alligevel tid. Jeg regner med at det drejer sig om at preloade billederne men de bliver alle sammen benyttes af mit stylesheet som så benyttes af de forskellige <td>´ere og tables. ved ikke om det er den rigtige fremgangsmåde, eller om jeg skal gøre noget andet... ???? Jeg søger efter en løsning hvor jeg kan bruge mine billeder uden hak og ventetid mens siden vises...
Umiddelbart lyder det mest som om du skal have optimeret dine billeder, for en baggrund kan da ikke have behov for en slags fotografisk dybde, når det skal fremvises på en computerskærm som baggrund ?-)
Dine hjørne-giffer burde højest fylde et par kb stykket og selv hvis det er fordi du har brugt et billede og slicet det op, burde der ikke være ret mange kb ialt -- hvis det du vil have vel at mærke er en velfungerende hjemmeside !-)
-- og baggrundsbilleder er der hele tiden, så hvis du skal få noget ud af det skal du simpelthen bede dine brugere vente, mens billederne bliver loadet !-)
-- en intro-side, som bare hedder 'Loader' indtil billederne ialt er fremme !-)
roenving har ovenstående fat i noget meget essentielt (ud over optimering af din grafik!), nemlig hvem skal se hvad hvornår og hvorfor ?
Hvis din side er meget specifik i sit indhold og målrettet en meget smal brugergruppe, så kan du sagtens sætte dem til at vente på en 'forside', mens din side loader bagved (husk en bar eller en procent der tæller op, så de kan se der sker noget). Hvis din side er målrettet surfere, er nøglen nok at det maks. må tage ca. 8 sek. at hente forsiden for et givent modem og maks. 10 - 12 sek. for undersiderne. D.v.s. du kan bruge nogle af undersiderne også til at preloade andet grafik, hvis det først skal fremvises senere på sitet ...
Når du så begynder at arbejde med din preloader, er det meget vigtigt i hvilken rækkefølge du loader div. grafik. F.eks. giver det ikke meget mening at loade en stor billedfil, der bruges på en underside, før hovedsidens grafik. Load f.eks. ovenfra og ned med de mindste grafikstykker først - så bruger kan se der sker noget.
Hejsa, lav en javascript funktion som du kalder fra <body onload>. Funktionen loader billederne vha new Image(<image>)
IE vil drøne koden af på et øjeblik og så fortsætte med at loade resten af siden, de billeder du har valgt at loade vil så langsomt blive læst, og du vil is statusbaren kunne se "henter element 1 af x"
Hej marla05... Hvis du kunne komme med et lille eksempel (noget kode) i et svar, man kan prøve, tror jeg du har givet mig løsningen, da mine billeder ikke kan blive mindre i størrelse
Jeg har forsøgt at bruge dit javascript, men billederne er ikke loadet hurtigere de kommer stadig i ryk, som om de bliver loadet en ad gangen sammen med det resterende indhold. Skal jeg kalde billederne på en bestemt måde nå jeg bruger dem. Jeg billederne er i klasser i et eksternt stylesheet i nogle klasser som så bliver kaldt af mine tabledelimiters <td class="top">
style class i CSS .top { width: 760px; background-image : url(../pics/graphics/maintop.gif); height: 10px; }
Nej, det lyder sandsynligt hvis billederne skal vises med det samme. Jeg troede at det var billeder der vist på et senere tidspunkt eg. ved tryk på et link whatever.
I dit tilfælde blive du nødt til at lave en loader - en side som kører det nævnte script og derefter hopper videre til din hovedside.
Din CCS indikerer at det er til brug i en tabel? Hvis dette er tilfældet findes der et flag der gør at en tabel ikke bliver vist før den er fuldt renderet, men jeg kan simpelthen ikke huske hvad det hed, led selv
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
