Bildvisning med klickbara småbilder Klickbar lista

JavaScript - klickbar text som visar en bild
Återanvända skript

Ofta är det mycket lätt att förändra JavaScript så att de kan göra något annat. Detta tänker jag visa i det här avsnittet.

Vi vill att en textlänk skall kunna visa en bild, men när sidan först läses in skall det inte finnas någon bild alls på sidan. Besökaren väljer alltså själv om han eller hon vill se bilden, vilket gör att det inte känns lika långsamt att vänta på att bilden skall laddas.

Det faktum att bilderna inte visas från början, minskar nedladdningstiden för den här sidan med nästan 7 sekunder för den som har ett 56.6-modem.

Vi skall åstadkomma detta genom att återanvända skriptet från föregående avsnitt, men ändra det en del. 

Det här blir resultatet
Bilden visas först när du klickar på en länk nedan

Röda lejongap
Storblommig klematis
Gulkremla i regnväder
Ringblomma
Fruktställning hos judekörs
Stickling av julkaktus
Föränderlig tofsskivling
Fångstbägare hos kannranka

Eftersom vi inte har någon bildtext att visa kan vi ta bort formuläret. Samtidigt tar vi förstås bort funktionen som annars skulle ha visat bildtexten, och matrisen med bildtexterna. Det enda som nu blir kvar av skriptet är kontrollen av webbläsarversionen och funktionen som visar bilden:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet
//kontroll av webbläsarversionen
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
ns3upp = (browserName == "Netscape" && browserVer >= 3);
ie4upp = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

//funktion som visar bilden
function visaBild(bildNamn) {
if (ns3upp || ie4upp) { //visar ingen bild om webbläsaren är för gammal
imgOn = ("" + bildNamn);
document.startbild.src = imgOn;
}
}
// Sluta gömma -->
</SCRIPT>

Av tabellen blev inte heller mycket kvar. Vi skall ju inte visa några klickbara småbilder eller utnyttja onMouseOver-hanteraren, så det räcker med vanliga länkar som anropar den enda kvarvarande funktionen visaBild(). I den enda återstående IMG-taggen sätter vi attributet SRC="" (två citationstecken direkt efter varandra), det vill säga att det inte visas någon bild alls.

<IMG NAME="startbild" SRC="" BORDER="0" WIDTH="210" HEIGHT="158">
<A HREF="javascript:visaBild('bild1.jpg');">Röda lejongap</A><BR>
<A HREF="javascript:visaBild('bild2.jpg');">Storblommig klematis</A><BR>
<A HREF="javascript:visaBild('bild3.jpg');">Gulkremla i regnväder</A><BR>
<A HREF="javascript:visaBild('bild4.jpg');">Ringblomma</A><BR>
<A HREF="javascript:visaBild('bild5.jpg');">Fruktställning hos judekörs</A><BR>
<A HREF="javascript:visaBild('bild6.jpg');">Stickling av julkaktus</A><BR>
<A HREF="javascript:visaBild('bild7.jpg');">Föränderlig tofsskivling</A><BR>
<A HREF="javascript:visaBild('bild8.jpg');">Fångstbägare hos kannranka</A>

Och formuläret försvann alltså helt. Det här var allt som behövde göras.

Det här är alldeles för enkelt!

Så vi skapar en funktion till. Sidan kommer att laddas snabbt, eftersom den inte visar några bilder. Men när besökaren klickar på någon av bildlänkarna skall den bilden visas, och då måste den väl laddas?

Nej, faktiskt inte - vi kan ordna det så att när sidan är färdigladdad, förladdas bilderna så att de ligger klara att visas när besökaren klickar. Det här gör vi med en funktion som anropas med händelsehanteraren onLoad, som vi lägger i den första BODY-taggen.

Först funktionen - den ser ut så här och den skall ligga inom SCRIPT-taggarna i HEAD:

function smygLadda() {
if (!document.images) return;
var bildlista = new Array();
var arguments = smygLadda.arguments;
for (var i = 0; i < arguments.length; i++) {
bildlista[i] = new Image();
bildlista[i].src = arguments[i];
}
}

Händelsehanteraren i BODY-taggen ser ut så här:

<BODY onLoad="smygLadda('bild1.jpg', 'bild2.jpg', 'bild3.jpg', 'bild4.jpg', 'bild5.jpg', 'bild6.jpg', bild7.jpg', bild8.jpg')">

Händelsehanteraren gör att så snart sidan är färdigladdad, och medan besökaren i lugn och ro börjar läsa på sidan, laddas bilderna in i bakgrunden så att de finns beredda i cache-minnet när besökaren klickar på länken till någon av bilderna.

Undersök skillnaden

Du kan inte undersöka hur stor skillnaden i laddningstid blir med och utan den nya funktionen smygLadda() genom att kontrollera den offline i webbläsaren. Då hämtas bilderna från din hårddisk och det ger ingen tidsåtgång. Men du kan göra så här:

Använd det här skriptet med till exempel sex bilder, men lägg bara hälften av dem i händelsehanteraren onLoad. Den andra hälften kommer då att laddas först när du klickar på länkarna. Skicka sedan upp sidan och bilderna till servern. Gå via Internet in på din sida och klicka på bildlänkarna, omväxlande på dem som finns i onLoad och på dem som inte finns där. Om du kopplar upp dig via modem, som de flesta gör, kommer du att märka att skillnaden blir ganska stor.

Din övningsuppgift

Gör om skriptet från Gör en bildvisning med klickbara småbilder på det här sättet. Lägg in den nya funktionen smygLadda() och koppla onLoad till hälften av bilderna. Undersök hur stor skillnad det gör för nedladdningstiden.

Om du har en snabb internetanslutning (ej modem) lär du inte märka någon större skillnad, men de flesta av dina besökare gör det.

Kunskapstest

Bildvisning med klickbara småbilder Klickbar lista

© SupportData.Net