Avatar billede redn3x Nybegynder
23. marts 2005 - 23:08 Der er 38 kommentarer og
1 løsning

Preload af billeder

Hvordan laver man en preload af billeder?
Avatar billede jakobdo Ekspert
23. marts 2005 - 23:30 #1
Brug dette script:

SCRIPT language="JavaScript">
<!--
pic1= new Image(100,25);
pic1.src="image1.gif";
//-->
</SCRIPT>
Avatar billede redn3x Nybegynder
23. marts 2005 - 23:40 #2
Hvordan skriver jeg det hvis der skal være flere billeder?
Avatar billede jakobdo Ekspert
23. marts 2005 - 23:56 #3
<SCRIPT language="JavaScript">
<!--
pic1= new Image(100,25);
pic1.src="image1.gif";
pic2= new Image(100,25);
pic2.src="image2.gif";
pic3= new Image(100,25);
pic3.src="image3.gif";
osv...
osv...
//-->
</SCRIPT>

100 og 25 er størrelsen på det billede som skal loades.
Avatar billede redn3x Nybegynder
24. marts 2005 - 00:00 #4
kan man også sætte en eller anden form for loade knap ind?
Avatar billede jakobdo Ekspert
24. marts 2005 - 00:08 #5
Hvad tænker du på?
Man preloader jo ofte billede med en funktion som kaldes:

<body onload="script:preloadImages()">

Hvor preloadImages(), så indeholder scriptet ovenover.
Avatar billede redn3x Nybegynder
24. marts 2005 - 00:10 #6
Skal jeg indsætte noget i body når jeg bruger det script du skriver der?
Avatar billede jakobdo Ekspert
24. marts 2005 - 00:23 #7
F.eks. ja!

Altså lad os sige du skal preloade 4 billeder...
De har alle en størrelse på 100x100 pixels.

Så laver vi:

<html>
<head>
<title>Preload Test</title>
<SCRIPT type="Text/javascript">
function preloadImages()
{
  pic1= new Image(100,100);
  pic1.src="image1.gif";
  pic2= new Image(100,100);
  pic2.src="image2.gif";
  pic3= new Image(100,100);
  pic3.src="image3.gif";
  pic4= new Image(100,100);
  pic4.src="image4.gif";
}

</script>
</head>
<body onLoad="script:preloadImages()">
Dette er en test af Preload Billeder
</body>
</html>
Avatar billede redn3x Nybegynder
24. marts 2005 - 00:26 #8
Jeg kan ikke få det til at virke...

Den loader dem på den samme måde...

Jeg vil helst have at den preloader det hele før den smider det op, og så der kommer sådan en "Loading" streg
Avatar billede jakobdo Ekspert
24. marts 2005 - 00:36 #9
Må jeg prøve at se din side?
Avatar billede redn3x Nybegynder
24. marts 2005 - 00:38 #10
www.mellowmind.dk

(den er under opbygning)
Avatar billede jakobdo Ekspert
24. marts 2005 - 00:46 #11
onload er en event som trigges når hele siden er loadet.
Så hvis du evt lavede en layer hvor der står loading...
Og så laver et script på onload som så fjerner denne layer, så har du din løsning.
Skal gerne kigge på det i morgen, nu vil jeg nemlig sove!
Avatar billede redn3x Nybegynder
24. marts 2005 - 00:47 #12
Ok, kan du lavet et helt script til mig til imorgen på et tidspunkt?
Avatar billede jakobdo Ekspert
24. marts 2005 - 08:46 #13
Jeg vil gerne prøve i løbet af dagen!
Men vil ikke love det.
Avatar billede jakobdo Ekspert
24. marts 2005 - 11:56 #14
Du kunne prøve denne løsning:

<html>
<head>
<title>Preload Test</title>
<style type="text/css">
    body {
        text-align: center;
    }
    div#loading {
        position: relative;
        margin: 0px auto;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<script type="text/javascript">
   
function hideLayer()
{
    if(document.layers)      //NN4+
    {
        document.layers['loading'].visibility = "hide";
    }
    else if(document.getElementById)      //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById('loading');
        obj.style.visibility = "hidden";
    }
    else if(document.all)    // IE 4
    {
        document.all['loading'].style.visibility = "hidden";
    }
}

</script>
</head>
<body onLoad="script:hideLayer()">
<div id="loading">Loading...</div>
Dette er en test af Preload Billeder
</body>
</html>

Den viser et DIV, hvor du evt kan lave en animeret gif, flash, besked eller lign...
Den bliver skjult når siden er loadet færdig.
Avatar billede redn3x Nybegynder
24. marts 2005 - 16:06 #15
Så jeg sætter bare den som Default og så kalder selve siden for Default2?

Hvor jeg har lavet function preloadImages() i Default2?

Skal det så virke?
Avatar billede jakobdo Ekspert
24. marts 2005 - 16:33 #16
Det jeg tænkte var at der vises en layer, hvor der står loading eller lign...
Bagved den vil siden stille og roligt loade!

Ved ikke om man kan lave det på smartere måder!
Avatar billede redn3x Nybegynder
24. marts 2005 - 16:49 #17
Hvordan får jeg den til at direkte brugeren over til hovedsiden?
Avatar billede jakobdo Ekspert
24. marts 2005 - 16:54 #18
Hovedsiden ligger bag layeren!

Gem lige denne side som en testside:

<HTML>
<HEAD>
<TITLE>Mellow Mind</TITLE>

<style type="text/css">
body {
    text-align: center;
}

div#loading {
    position: relative;
    margin: 0px auto;
  width: 100px;
  height: 100px;
    background-color: red;
}
</style>

<SCRIPT LANGUAGE="JavaScript">
image1 = new Image();
image1.src = "images/button12.png";

image2 = new Image();
image2.src = "images/button22.png";

image3 = new Image();
image3.src = "images/button32.png";

image4 = new Image();
image4.src = "images/button42.png";

image5 = new Image();
image5.src = "images/button52.png";

pic1= new Image(898,166);
pic1.src="images/top.jpg";
pic2= new Image(183,29);
pic2.src="images/menu1.png";
pic3= new Image(100,25);
pic3.src="images/button1.png";
pic4= new Image(29,29);
pic4.src="images/menu2.png";
pic5= new Image(82,29);
pic5.src="images/button2.png";
pic6= new Image(33,29);
pic6.src="images/menu3.png";
pic7= new Image(82,29);
pic7.src="images/button3.png";
pic8= new Image(33,29);
pic8.src="images/menu4.png";
pic9= new Image(82,29);
pic9.src="images/button4.png";
pic10= new Image(30,29);
pic10.src="images/menu5.png";
pic11= new Image(82,29);
pic11.src="images/button5.png";
pic12= new Image(180,29);
pic12.src="images/menu6.png";
pic13= new Image(898,26);
pic13.src="images/menudown.png";
pic14= new Image(898,43);
pic14.src="images/fronttop.png";
pic15= new Image(898,330);
pic15.src="images/front.jpg";
pic16= new Image(180,330);
pic16.src="images/frontleft.jpg";
pic17= new Image(177,330);
pic17.src="images/frontright.jpg";
pic18= new Image(898,225);
pic18.src="images/bottom.jpg";
</script>

function hideLayer()
{
    if(document.layers)      //NN4+
    {
        document.layers['loading'].visibility = "hide";
    }
    else if(document.getElementById)      //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById('loading');
        obj.style.visibility = "hidden";
    }
    else if(document.all)    // IE 4
    {
        document.all['loading'].style.visibility = "hidden";
    }
}

</SCRIPT>

</HEAD>
<BODY BGCOLOR="#000000" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="script:hideLayer()">

<div id="loading">Loading...</div>

<BGSOUND SRC="rofl.wav">
<center>
<table>
<tr>

<td background="normal.jpg" width="898" height="726" valign="top">
<center>
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top.jpg"></td>
</tr>
<tr>
<td><img src="images/menu1.png"><a href="default.htm" onmouseover="image1.src='images/button12.png';" onmouseout="image1.src='images/button1.png';"><img name="image1" src="images/button1.png" border=0></a><img src="images/menu2.png"><a href="bio.htm" onmouseover="image2.src='images/button22.png';" onmouseout="image2.src='images/button2.png';"><img name="image2" src="images/button2.png" border=0></a><img src="images/menu3.png"><a href="media.htm" onmouseover="image3.src='images/button32.png';" onmouseout="image3.src='images/button3.png';"><img name="image3" src="images/button3.png" border=0></a><img src="images/menu4.png"><a href="tour.htm" onmouseover="image4.src='images/button42.png';" onmouseout="image4.src='images/button4.png';"><img name="image4" src="images/button4.png" border=0></a><img src="images/menu5.png"><a href="contact.htm" onmouseover="image5.src='images/button52.png';" onmouseout="image5.src='images/button5.png';"><img name="image5" src="images/button5.png" border=0></a><img src="images/menu6.png"></td>
</tr>
<tr>
<td><img src="images/menudown.png"></td>
</tr>
<tr>
<td background="images/fronttop.png" width="898" height="43"><center><font size="3"><marquee style="width:54%;cursor:hand;color:white;height:14;filter:glow(strength=1,color=black)" onclick="gotopage(34)" scrolldelay=60 scrollamount=1>News: The site is under construction!</marquee></td>
</tr>
<tr>

<td background="images/front.jpg"><img src="images/frontleft.jpg"><iframe src="default2.htm" name="Main" width="541" height="330" frameborder="0" border="0"></iframe><img src="images/frontright.jpg"></td>
</tr>
<tr>
<td background="images/bottom.jpg" width="898" height="225" valign="top"><center><font size="2" color="#ffffff" face="verdana"><br><br>Design by <a href="mailto:mikstor@gmail.com"><font color="#ffffff">Storgaard Webdesign</a></td>
</tr>
</table>
</BODY>
</HTML>
Avatar billede roenving Novice
24. marts 2005 - 17:21 #19
>>jakobdo

-- hvor har fået script: i onload-event-handleren fra ?-)

-- det er godt nok første gang, jeg har set den fejl, for det er jo ugyldig script-kode, og i javascript-events er der jo ikke nogen grund til at fortælle javascript-fortolkeren, at den skal tolke det javascript, der står, som javascript ...

-- det kan måske forstås, at når man flytter noget fra en href (hvor java script: pseudo-direktivet er helt lovligt !-) over i en javascript-event, så glemmer at fjerne det, men begynde at introducere det steder, hvor man aldrig nogensinde har kunnet bruge en html-reference er bare tåbeligt ...

-- og jeg kender ingen browsere som kløjs i ulovligheden java script: -- men hvordan de vil te sig med script: har jeg ingen anelse om !o]
Avatar billede redn3x Nybegynder
24. marts 2005 - 17:37 #20
Det virker ikke :S
Avatar billede jakobdo Ekspert
24. marts 2005 - 17:38 #21
Har du lagt det på siden?
Avatar billede redn3x Nybegynder
24. marts 2005 - 18:20 #22
Jeg har lagt det op nu...

Hvad er problemet?
Avatar billede jakobdo Ekspert
24. marts 2005 - 18:22 #23
Mit indlæg fra: 24/03-2005 16:54:21
Har du prøvet at gemme det i en ny fil, f.eks. test.html på servere og så åbne den? (via internettet?)
Avatar billede redn3x Nybegynder
24. marts 2005 - 18:26 #24
http://mellowmind.dk/test.htm

Virker stadig ikke
Avatar billede jakobdo Ekspert
24. marts 2005 - 18:34 #25
Som Roenving var inde på, så har jeg lavet en lille fejl:

prøv: at ret: onload="script:hideLayer() i body til:

onload="hideLayer()
Avatar billede redn3x Nybegynder
24. marts 2005 - 18:35 #26
Virker stadig ikke...
Avatar billede jakobdo Ekspert
24. marts 2005 - 18:37 #27
JEg så ellers den røde boks før!
Nu er den væk! :(
Så ved jeg sgu ikke lige hvad jeg skal gøre.
Avatar billede redn3x Nybegynder
24. marts 2005 - 18:40 #28
Den forsvandt da jeg ændrede det med onload="script:hideLayer()...
Avatar billede redn3x Nybegynder
24. marts 2005 - 18:51 #29
Er der andre der har en løsning?
Avatar billede redn3x Nybegynder
24. marts 2005 - 18:52 #30
roenving> Kan du ikke prøve?
Avatar billede redn3x Nybegynder
24. marts 2005 - 19:07 #31
Jeg lukker det her spørgsmål og opretter et nyt
Avatar billede roenving Novice
25. marts 2005 - 10:40 #32
Prøv http://www.phoenixv.dk/arkiv.html (kig under billeder !-)
Avatar billede redn3x Nybegynder
25. marts 2005 - 16:47 #33
roenving> Du skal nok få point senere, hvis du hjælper mig her...

Det der script du gav mig virker fint, men så når den redirecter til siden, som den lige har preloadet loader den billederne forfra, hvad skal jeg gøre?
Avatar billede roenving Novice
26. marts 2005 - 11:49 #34
Hvis browseren har cachet billederne (hvilket den altid gør !-) vil den alligevel kigge efter på serveren, om der skulle være kommet en ny udgave, og det vil med med små billeder se fuldstændigt ud som om den henter dem påny, med større billeder vil du kunne se, at det faktisk går en hel del stærkere !-)
Avatar billede redn3x Nybegynder
26. marts 2005 - 14:45 #35
http://www.mellowmind.dk/preload.htm

Kan du ikke lige tjekke om jeg har gjort det rigtigt?
Avatar billede roenving Novice
26. marts 2005 - 14:51 #36
Jeg kan ikke se nogen fejl !-)

Men jeg checkede altså ikke filnavne osv., det regner jeg med at du selv har dobbeltchecket !o]
Avatar billede redn3x Nybegynder
26. marts 2005 - 15:06 #37
Ja, men jeg synes stadig den er langsom...

Prøv at sammenligne http://www.mellowmind.dk/preload.htm med http://www.mellowmind.dk
Avatar billede roenving Novice
26. marts 2005 - 15:16 #38
Ja, jeg kan heller ikke se forskel ...
Avatar billede redn3x Nybegynder
26. marts 2005 - 15:20 #39
Har du andre løsninger?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester