Förladda bilder med objektet Array()

Med flera stora bilder eller bilder med stort färgdjup på sidan, lägger vi inte in dem på det vanliga sättet. De flesta besökare får vänta alldeles för länge på att bilderna skall visas och då finns risken att de tröttnar.

I stället är det första som visas på sidan text eller något annat som kan hålla besökaren sysselsatt, medan bilderna laddas i bakgrunden. När besökaren sedan pekar på en bildtext, finns bilden färdigladdad och visas ögonblickligen.

Även det här gör vi med objektet Array() och värdena (vektorerna) i denna Array() kommer att hämtas från onLoad i den inledande BODY-taggen:

Skriptet i HEAD:

<SCRIPT LANGUAGE="JavaScript">
<!--
function smygLadda() {
if (!document.images) return;
var bildlista = new Array();
var bilder = smygLadda.arguments;
for (var i = 0; i < arguments.length; i++) {
bildlista[i] = new Image();
bildlista[i].src = bilder[i];
}
}
// -->
</SCRIPT>

Anropet i BODY:

<BODY onLoad="smygLadda('bild1.jpg', 'bild2.jpg', 'bild3.jpg')">

Funktionen anropas inte förrän hela sidan för övrigt är färdigladdad. Observera att det sitter dubbla citationstecken runt hela onLoad-innehållet och enkla runt vart och ett av bildfilsnamnen.

När hela sidan är inläst, kommer funktionen smygLadda() att läsa in bilderna bild1.jpg – bild3.jpg i cacheminnet. Bilderna hamnar i den Array() vi skapade.

De visas inte, men de finns tillgängliga lika snabbt som om besökaren hade dem på sin egen hårddisk. När han stänger sin webbläsare, tas bilderna bort igen.

Bilderna är indexerade i Array(), med bild1.jpg som 0, bild2.jpg som 1 och bild3.jpg som 2. Den indexeringen skall vi utnyttja när vi visar bilderna.

Utöver bilderna ovan kommer vi att använda ytterligare en, nämligen en 2x2 pixlar stor transparent GIF-bild. Den bilden visar vi i bilderns platshållare, för att besökaren skall slippa se fula röda kryss innan de riktiga bilderna visats.

Här visas den första bilden. Till höger finns en "platshållare" som först innehåller den transparenta GIF-bilden.

Den bilden syns inte, men den fyller en funktion genom att besökaren slipper se en ruta som bara innehåller markeringen för att länken till bilden är fel.

När besökaren pekar på den "länkade" bildtexten visas den förladdade bilden i rutan där den osynliga GIF-bilden tidigare höll till.

Röda lejongap blommar nästan hela sommaren.

HTML-koden till den här bildvisningen ser ut så här:

<P><IMG src="bild5.gif" width="210" height="158" align="left" hspace="10" vspace="10" border="1">
<A href="#" onMouseover="document.images[0].src='bild1.jpg';">Röda lejongap</A> blommar nästan hela sommaren</P>

Bilden bild5.gif är bara 2x2 pixlar stor, men vi anger ändå bredd och höjd på den riktiga bilden. Det gör att lejongapsbilden kommer att visas i rätt format, utan att texten förskjuts.

hspace="10" vspace="10"
Det här gör att bilden får 10 pixlars "luft" omkring sig - texten kommer inte att krypa alldeles inpå bilden.

border="1"
Det här gör att bilden visas med en pixelbred ram och besökaren ser redan från början var bilden kommer att visas. Om vi ändrar till border="0" visas bilden utan ram .

onMouseover="document.images[0].src='bild1.jpg';"
Här anger vi index för den bild vi vill visa. [0] betyder "den första bilden på sidan". På den här sidan har jag fått ange [2] i stället, eftersom de båda pilarna högst också är bilder, med index [0] och [1].

onMouseout="document.images[2].src='bilder/bild5.gif';"
Den här koden finns inte i HTML-koden ovan, men om vi lägger till den efter onMouseover-koden tas lejongapsbilden bort när muspekaren flyttas från länken, och ersätts med den genomskinliga bilden.

Ett annat sätt

Vi kan använda nästan samma kod för att visa bilder på ett annat sätt. Här utnyttjar vi de båda redan inlästa bilderna bild2.jpg och bild3.jpg, men vi skall visa dem i en och samma platshållare.

Riktiga åskmoln tornade upp sig och vi väntade på regnet.

När det inte kom lade jag på en regnmask i PaintShop Pro i stället.

När besökaren pekar på någon av miniatyrerna visas den riktiga bilden till vänster. Flyttar han muspekaren till den andra miniatyren byts bilden till vänster mot den nya bilden. Den här varianten är rolig eftersom den gör det möjligt att direkt jämföra två bilder, och i det här fallet se vad man kan göra med PaintShop Pro.

HTML-koden:

<TR><TD width="450">
<P><IMG src="bild5.gif" width="410" height="307" align="left" border="0"></P></TD>
<TD width="175"><P><A href="#" onMouseOver="document.images[1].src='bild2.jpg';">
<IMG border="0" src="bilder/bild2tum.jpg" width="50" height="37"></A></P>
<P>Riktiga åskmoln ...</P>
<P><A href="#" onMouseOver="document.images[1].src='bilder/bild3.jpg';">
<IMG border="0" src="bilder/bild3tum.jpg" width="50" height="37"></A></P>
<P>När regnet kom ...</P></TD></TR>

Observera här att länken är flyttad från texterna till miniatyrbilderna. De båda länkarna hämtar varsin bild - bild2.jpg respektive bild3.jpg.

Men båda dessa bilder visas i samma platshållare (document.images[1].src), nämligen den andra bildplatshållaren på sidan (den första har index 0).

För att få en snygg visning av både den stora bilden och de båda miniatyrerna, har jag dessutom lagt bilderna i en tabell, med den stor bilden i en vänstercell (TD) och miniatyrerna i en högercell.

Slutligen har jag tagit bort "hspace" och "vspace" från den stora bilden. Däremot har jag kvar P-taggen runt den. Det här är en rent kosmetisk åtgärd som gör att bilden placeras som stilmallen säger, med samma indrag som andra P-taggar på sidan.

© SupportData.Net