"postload" af billeder

Du kan lave et JavaScript der preloader billederne, og så læg billederne i en sådan række følge at baggrunde og logo er de første der hentes, her efter vil all billed-filer blive vist på engang :-)

Det er ikke helt det jeg vil ha', for så skal man jo alligevel vente med at se siden til billederne er hentet.

Det skal være sådan at selve siden (inkl. grafik) bliver hentet først, og så disse billeder bagefter, mens men læser hvad der står på siden.
Eller, som sagt, at billederne bliver hentet når man trykker på en "vis billeder"-knap.

Ok..

Du kan preloade dine billeder og så få dem vist når du klikker på en knap.

<ole>
Du kan bruge en alm. preload funktion af dine billeder, kaldt på 'onload'. Der, hvor billederne skal vises skriver du img-tags, men i stedet for det rigtige billede (som du vil vise senere) skriver du sourcen på en klar gif på 1*1 pixel. Altså f.eks:
  <img src="spacer.gif" name="mitPic" width="120" height="75">
  <img src="spacer.gif" name="mitPic2" width="140" height="85">
  <img src="spacer.gif" name="mitPic3" width="115" height="63">
osv - osv
Så kan du bare skifte alle billerne med swap-funktion på en knap.
/Vh
</bole>

olebole> Det lyder som noget jeg kan bruge.

Jeg vil IKKE preloade billederne, da siden helst skal loade meget hurtigt, og problemerne med billederne er jo nettop at de tager tid at hente.

Men hvis jeg laver billederne med en 1*1 klar gif, kan jeg så have en knap der hedder "hent xxx.gif istedet for klar.gif"?

/snedled

Jeg har lidt travlt lige nu, men jeg kaster noget op til dig senere i aften.
Bare rolig det er noget kode, jeg har tænkt mig at kaste op...LOL!

olebole>
Det glæder jeg mig til
- jeg tager spanden frem!!

Jeg tror også at det er muligt at lave en ren HTML løsning.

Til img-tagget findes en attribut lowsrc, som angiver stien til en billede i lavere opløsning, som så bliver loaded først, for derefter at blive udskiftet med højopløsningsbilledet.
"URI designating the source of this image, for low-resolution output.", W3.org

<img src="HøjOpløsning.gif" width="300" height="255" lowsrc="LavOpløsning.jpg">

Prøv iøvrigt at se http://htmlgoodies.earthweb.com/tutors/lowsrc.html

doeleman  >> er det ikke kun en NS attribut?

Puuha...det blev sent...bliver nødt til at vente til imorgen :-(

Muligvis, jeg har aldrig selv brugt den i praksis, jeg har bare set muligheden i DreamWeaver 3.

OK, jeg tjekkede lige.

Lowsrc attributen skulle meget gerne virke i NN2, NN3, NN4 og IE4/5.

olebole> Jeg glæder mig stadig til du kaster op!?

doeleman>Ok, det lyder fedt. det vil jeg bruge hvis Olebole ikke bliver dårlig?!

Giv mig et kvarter ;-)

OK, her er noget:

<html>
<head>
<script language="javascript">
<!--
var myPic = new Array();

function preLoad() {
    for (i=0; i<3; i++) {
        myPic[i] = new Image();
    }
    myPic[0].src = "etEllerAndet_1.jpg";
    myPic[1].src = "etEllerAndet_2.jpg";
    myPic[2].src = "etEllerAndet_3.jpg";
    //swapAll();
}
function swapAll() {
    for (j=0; j<myPic.length; j++) {
        document.images['mitPic'+(j+1)].src = myPic[j].src;
    }
}
//-->
</script>

</head>
<body onload="preLoad();">
<img src="spacer.gif" name="mitPic1" width="120" height="75">
<img src="spacer.gif" name="mitPic2" width="140" height="85">
<img src="spacer.gif" name="mitPic3" width="115" height="63">
<a href="java script:swapAll();">Vis billeder</a>

</body>
</html>

Hvis du fjerner de to slashes i linien:
        //swapAll();
...vises billederne automatisk, når de er preloaded. Ellers kan du bruge linket for neden...pick your choise ;-)

3-tallet i linien:
        for (i=0; i<3; i++) {
...skal ændres til antallet af billeder, du ønsker i funktionen.

Håber, det kan hjælpe dig - og undskyld jeg forblev rask så længe ;-)))
/Vh

olebole>Tak skal du ha', det var lige det jeg skulle bruge! -TAK

doleman> du fik lige lidt point, selvom jeg ikke brugte dit svar.

/Snedled

doeleman >> så lærte jeg alligevel lidt idag ;-)) Tak!

olebole> Selv om dit script virkede fint, fandt jeg en anden løsning:
PHP - det virker fint.

Prøv selv at se på http://www.snedled.dk

/snedled

Jamen, sneled...jeg kan da ikke være mere enig :-))  FINT...!!!

Én ting, dog: Kunne du ikke lave underpunkterne ved dine links en anelse mørkere? I defaultindstillingen på min Mac er de næsten usynlige...bare en anelse, please.

/Vh

olebole> Jo, det skal jeg ha' gjort, - Tak for rådet.

Jeg skal bare lige finde ud af at gemme et css, istedet for en farvekode i link's filen, men jeg kan ikke finde ud af hvilken tag jeg skal bruge uden at der bliver skiftet linie bagefter.

/snedled

olebole> Så er det rettet.

Jeg fandt ud af at <span id=*> ikke skifter linie, men det vidste du vel.

Prøv og se om det ikke blev bedre!
/snedled

http://www.snedled.dk

Det hjalp...måske stadig en aaaaanelse lyst for pedanten her, men klart bedre ;-)
Undskyld mig, men ja...det vidste jeg godt. Jeg har nemlig studeret The Dynamic Duo af Dan Steinman.  ;-))
Hvis du ikke kender den, så se at komme afsted til
    http://www.dansteinman.com
Han er STOOOOR...!!! Og han er klart et link værd på din side!
/Vh