Copyright © 2002,2003 Jørgen Farum Jensen
Bemærk at hvis du vil se statusbjælken én gang til, vil du sandsynligvis ikke se den samme effekt som første gang.
Det skyldes, at alle billederne nu er cachet, og derfor ikke skal downloades endnu en gang. De bliver læst fra cachen.
Hvis du vil se den fulde effekt igen, skal du derfor tømme din cache, og derefter vælge menupunktet "Preload med statusbjælke" i sektionsmenuen til højre herfor.
Websiden Sådan laver du en Splash Page er et eksempel på, hvorledes du med ret enkle midler kan lave en stærk visuel effekt. "Problemet" med netop den løsning er, at den baserer sig på gengivelsen af en serie bogstaver. Den praktiske virkning af dette er, at det tager bogstavelig talt ingen tid at overføre al koden. Og det er jo godt.
I "det virkelige liv" er det jo imidlertid ofte sådan, at du vil ønske at lave den visuelle effekt ved hjælp af billeder. For at sige det mildt, tager det jo lidt længere tid at overføre måske mange snese kilobyte billedmateriale til din visuelle effekt. I den tid, det tager, "spiller" din effekt jo ikke, og det tager lissom lidt glansen af Skt. Gertrud.
Jeg præsenterer her en løsning på dette problem, der går ud på at underholde brugeren med andet end end blank skærm, mens indlæsningen af dine billeder finder sted.
Løsningen går ud på, at den første side, der indlæses, kun har til opgave at foretage en "preload" af billederne, således at disse befinder sig i brugerens lokale browsercache, når den rigtige side indlæses i brugerens browser. Imens denne preload står på, vises en statusbjælke, der holder brugeren underettet om, at der faktisk foregår noget, og hvor langt vi er i denne proces. Når alle billederne er overført, skiftes straks til den rigtige side, hvor billederne skal bruges. I og med at disse billleder allerede befinder sig i cachen, indlæses de på websiden i løbet af ingen tid.
Det første element i løsningen er index-siden, den side, der først indlæses i browseren. JavaScript-koden til denne se således ud:
<script type="text/javascript">
// Skjul scriptet for JavaScript-lamme browsere.
var locationAfterPreload = "home.html";
/* Herover: url'en til den side, der skal
indlæses efter preload */
var lengthOfPreloadBar = 200;
/* Herover: Længden af statusbjælken i pixel */
var heightOfPreloadBar = 30;
/* Herover: Højden af statusbjællken i pixel */
/* Herunder: Indsæt url'erne til de billeder,
du ønsker at preloade */
var yourImages = new Array("res/forside1.jpg",
"res/forside2.jpg", "res/forside3.jpg",
"res/forside3.jpg", "res/forside4.jpg",
"res/forside4.jpg", "res/forside5.jpg",
"res/forside6.jpg");
/* Resten af koden bør du kun ændre, hvis du
klart kan gennemskue dette JavaScript */
if (document.images) {
var dots = new Array();
dots[0] = new Image(1,1);
dots[0].src = "res/darkblue.gif"
/* Herover: Farven på statusbjælken laves af en
1x1 kulørt pixel. Du kan indsætte en anden kulørt
pixel, men kun 1x1 pixel */
dots[1] = new Image(1,1);
dots[1].src = "res/lightblue.gif"
/* Herover: Farven på statusbjælken efterhånden som
processen skrider frem. Du kan indsætte en anden
kulørt pixel, men kun 1x1 pixel */
var preImages = new Array(),coverage =
--> Math.floor(lengthOfPreloadBar/yourImages.length),
--> currCount = 0;
var loaded = new Array(),i,covered,timerID;
var leftOverWidth = lengthOfPreloadBar%coverage;
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount +
--> ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// slut skjul script -->
</script>
Dette script har jeg ikke selv lavet. Jeg har fundet det ved at søge på et sådant script på Dynamic Drive, hvortil det er uploadet af Marcin Wojtowicz one_spook@hotmail.com.
- der hører til dette script, skal vise selve statusbjælken og eventuel tekst. I mit eksempel ser koden på siden således ud:
<center>
<p class="stor">En webside indlæses...<p>
<span class="lille">0% </span>
<script language="JavaScript1.1">
<!-- Skjul scriptet for JavaScript-lamme browsere
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="'
--> + coverage + '" height="' + heightOfPreloadBar
--> + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="'
--> + (leftOverWidth+coverage) + '" height="'
--> + heightOfPreloadBar + '" name="img' +
--> (yourImages.length-1)
--> + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
/* Du bør ha' et link til den "rigtige" side for
det tilfældes skyld, at brugeren straks vil springe
videre, eller dersom brugerens browser ikke
understøtter JavaScript. */
document.write('<p><b><a href="home.html">Straks videre</a></b></p>')
// slut skjul script -->
</script>
</center>
Bemærk her tegnet -->, der angiver, at jeg har indsat et ulovligt linieskift for at få koden til at passe på denne webside. Kopierer du denne kode, skal du huske at fjerne disse tegn.
Det er måske nemmere for dig at downoade hele den side ved at højreklikke på menupunktet "Preload med statusbjælke" i sektionsmenuen til højre.
Når den webside, der er gennemgået ovenfor, har preloadet de ønskede billeder, skal den skifet til en ny side. I det aktuelle eksempel hedder denne home.html.
Denne er den egentlige "Splash Page", hvor jeg bruger de billeder, jeg netop har downloadet. Hvordan den side er skruet sammen finder du beskrevet på websiden Splashpage med IE-filtre.
Senest opdateret: 6. nov. 2003.
