Copyright © 2002,2003 Jørgen Farum Jensen
Denne webside vises først efter 2 sekunders forløb. Hvad skal det gøre godt for?
Den funktion, der sørger for at udskifte den kedelige grå flade med selve websiden, udløses af onload event handleren. Det er et lidet værdsat faktum, at denne event handler først fyrer, når alle elementer på websiden er indlæst.
Den praktiske betydning af dette er, at du kan sørge for, at hele din webside dukker op som ved et trylleslag, på én gang, uanset hvor meget grafik og hvor meget JavaScript kode, du har, der skal indlæses. Dine brugere er altså ikke henvist til at sidde og glo på stumper og stykker af din webside, mens de tungere dele overføres.
På denne side har jeg indført en lille tidsforsinkelse for at sikre mig, at alle der ser på siden får et klart indtryk af, hvad der sker.
Denne metode beror på, at denne webside omfatter to elementer, der hver for sig fylder hele siden. Det ene element ser således ud:
<div id="cover"> <h1>En webside indlæses...</h1> </div>
Dette element er indsat på siden umiddelbart efter body-markøren, så det bliver indlæst først af alt.
Det andet element er selve body-markøren med sidens normale indhold.
Stylesheet'et for cover-elementet er således udformet, at det dækker hele siden:
#cover {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:99;
visibility:visible;
background-color:silver;
}
Den meget simple JavaScript funktion, der ordner hele sagen, er:
function visSiden(){
if (document.getElementById){
blok = document.getElementById('cover').style
blok.display="none"
}
I body-markøren har jeg indsat onload event-handleren:
<body onload="setTimeout('visSiden()',2000)">
– der som nævnt først fyrer når alle sidens elementer er indlæst. Når det er sket, udløses funktionen visSiden() og fjerner laget #cover.
Der er ikke på denne side megen tung grafik, alt i alt vejer den omkring 12-15 kilobyte, så jeg har sat en tidsforsinkelse ind på udløsningen af funktionen visSiden(). Der er for at du kan nå at danne dig et indtryk af virkningen, selvom du indlæser siden over en hurtigt netværksforbindelse. Bemærk at timeren jo først går i gang, når alle elementerne er indlæst, så den samlede tid fra du begynder at indlæse siden og til du faktiske ser selve siden er lidt større end 2 sekunder, afhængigt af din opkoblingshastighed.
Hvis du ikke har bemærket det, vil jeg gøre opmærksom på, at denne side mangler den dynamiske hovedmenu i højre siden af skærmbilledet. Det er ikke fordi jeg vil snyde på vægten, men fordi den menu tegnes oven på alting, så den ville også kunne ses oven på cover-laget.
Der er en metode til at fjerne den, men den går over at identificere menu-elementet ved dets class name. Så langt er jeg kun kommet i tankerne, og ikke i praksis. Og problemet opstår jo kun, fordi jeg har den tidsforsinkelse, som jeg har indsat, fordi det er en demoside.
Det er egentlig lidt bevidst,jeg har valgt den kedelige grå farve til mit "covering layer". Jeg synes, det er vigtigt at få princippet bag det her slået fast, før jeg begynder at interessere mig for, hvordan det ser ud.
Du kan naturligvis vælge en vilkårlig anden farve, eller en baggrundsflise for at gøre dette "covering layer" en anelse mere spændende. Men du kan ikke lave nogen dynamiske effekter, for du kan simpelthen ikke sætte noget i gang, før onload event handleren fyrer, og det er jo først når alting alligevel er indlæst.
Gør du det alligevel, er det en splash page, du har lavet, og så kan du lige så god tage skridtet fuldt ud og lave den som en en indgangsside, der efter at være spillet færdig indlæser en anden side. Som et oplæg til en lidt smartere måde at gøre disse ting på har jeg lavet en sådan. Betragt dét eksempel som den næste skridt til at lave den perfekte løsning: Vis mig den første splash page.
Senest opdateret: 6.nov. 2003.
