Søg
Avatar billede stig69 Nybegynder
21. maj 2003 - 15:41 Der er 14 kommentarer og
1 løsning

Indlæsning af billeder i bestemt rækkefølge

Jeg har en hjemmeside med en animation øverst og tre billeder nederst. Jeg vil gerne have at de tre billeder bliver indlæst/load'et før animationen bliver load'et/kørt. Og løsningen helst HTML eller javascript.

Stig
Avatar billede roenving Novice
21. maj 2003 - 15:45 #1
en preloader:

<script language="javascript" type="text/javascript">

var imgs;

imgs[0]=new Image(h,w);
imgs[0].src="image1.gif";
imgs[1]=new Image(h,w);
imgs[1].src="image2.gif";
imgs[2]=new Image(h,w);
imgs[2].src="image3.gif";

</script>
Avatar billede roenving Novice
21. maj 2003 - 15:46 #2
-- og så sætter du dine <img>-tags src med en onload og _bagefter_ det samme med din animation

hth
jes
Avatar billede stig69 Nybegynder
21. maj 2003 - 15:48 #3
Kan du give et eksempel? Inden jeg finder ud af det, er det blevet mørkt...
Avatar billede roenving Novice
21. maj 2003 - 15:57 #4
<script language="javascript" type="text/javascript">

var imgs;

imgs[0]=new Image(h,w);  //her skal du selvfølgelig indsætte højde og bredde
imgs[0].src="image1.gif"; //og her dit filnavn
imgs[1]=new Image(h,w);
imgs[1].src="image2.gif";
imgs[2]=new Image(h,w);
imgs[2].src="image3.gif";

function visBilleder(){
document.images["billede1"].src=imgs[0].src;
document.images["billede2"].src=imgs[1].src;
document.images["billede3"].src=imgs[2].src;

document.images["animation"].src="sti/animationsNavn.gif";
}

</script>

</head>

<body onload="visbilleder();">

<img src="" name="animation" height=200 width=150><!--Til din animation-->


<img src="" name="billede1" height=75 width=100><!--Til billede1-->

<img src="" name="billede2" height=75 width=100><!--Til billede2-->

<img src="" name="billede3" height=75 width=100><!--Til billede3-->


</body>

-- bemærk, at jeg har scriptet i <head>-tagget -- du kunne også lave det så det kom der hvor billederne skulle være ...
Avatar billede roenving Novice
21. maj 2003 - 16:04 #5
-- og sågar nøjes med

function visBilleder(){
document.images["animation"].src="sti/animationsNavn.gif";
}


-- og


<img src="image1.gif" name="billede1" height=75 width=100>
<img src="image2.gif" name="billede2" height=75 width=100>
<img src="image3.gif" name="billede3" height=75 width=100>

preloaderen skal selvfølgelig være der, for så vil billederne være i browserens cache -- og det skal være *præcis* den samme URL
Avatar billede stig69 Nybegynder
21. maj 2003 - 18:41 #6
Jeg kan ikke få det til at virke. Jeg får en fejl når jeg loader siden:
Error: 'imgs.5' is null or not an object

Du får også lige min kode, måske kan du gennemskue det. Jeg synes jeg har gjort alt hvad du sagde.

<STYLE TYPE="text/css">
TABLE {
    height:20%;
    text-align:center;
}
</STYLE>
<script language="javascript" type="text/javascript">
var imgs;

imgs[0]=new Image();
imgs[0].src="images/logo_on_blue_back.gif"; //min animation
imgs[1]=new Image(); 
imgs[1].src="images/scan_4764&4760a.jpg";
imgs[2]=new Image();
imgs[2].src="images/scan_4757.jpg";
imgs[3]=new Image();
imgs[3].src="images/scan_4765.jpg";

function visBilleder(){

document.images["billede3"].src=imgs[1].src;
document.images["billede1"].src=imgs[2].src;
document.images["billede2"].src=imgs[3].src;

document.images["animation"].src=imgs[0].src; //min animation
}
</script>
</head>
<body bgcolor="#000099" onload="visBilleder();" style="margin:0;">
<div style="text-align:center;">
<table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        &nbsp;
    </td>
</tr>
</table>
<table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        &nbsp;
    </td>
</tr>
</table><table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        <img src="" name="animation">
    </td>
</tr>
</table><table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        &nbsp;
    </td>
</tr>
<table width="240" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td width="80">
        <img src="" name="billede3">
    </td>
    <td width="80">
        <img src="" name="billede1">
    </td>
    <td width="80">
        <img src="" name="billede2">
    </td>
    </tr>
</table>
</div>
</body>
</html>
Avatar billede stig69 Nybegynder
21. maj 2003 - 18:42 #7
arhhh.. istedet for Error: 'imgs.5' is null or not an object skulle der stå
Error: 'imgs.1' is null or not an object
Avatar billede stig69 Nybegynder
21. maj 2003 - 18:43 #8
Faktisk bliver der slet ikke fremvist noget på skærmen... ligesom når URL'en mangler...
Avatar billede roenving Novice
21. maj 2003 - 18:55 #9
Dvs. den stopper:

imgs[0]=new Image();
imgs[0].src="images/logo_on_blue_back.gif"; //min animation
imgs[1]=new Image(); 
imgs[1].src="images/scan_4764&4760a.jpg"; //<--- her stopper den

jeg ville lige først teste med et andet billede
Avatar billede roenving Novice
21. maj 2003 - 18:58 #10
Ser din kode præcis sådan ud ?-)

Eller er det en vis lige hvad jeg har gjort-udgave

Hvis det ser sådan ud, så sæt lige noget tekst ind et eller andet sted og fortæl om det komer frem
Avatar billede stig69 Nybegynder
21. maj 2003 - 19:11 #11
Sorry - her kommer den

<STYLE TYPE="text/css">
TABLE {
    height:20%;
    text-align:center;
}
</STYLE>
<script language="javascript" type="text/javascript">
var imgs;

imgs[0]=new Image();
imgs[0].src="images/logo_on_blue_back.gif";
imgs[1]=new Image(); 
imgs[1].src="images/scan_4764&4760a.jpg";
imgs[2]=new Image();
imgs[2].src="images/scan_4757.jpg";
imgs[3]=new Image();
imgs[3].src="images/scan_4765.jpg";
imgs[4]=new Image(h,w);
imgs[4].src="images/scan_4761.jpg";
imgs[5]=new Image();
imgs[5].src="images/scan_4763.jpg";
imgs[6]=new Image();
imgs[6].src="images/scan_4758a&4758.jpg";

function visBilleder(){
document.images["billede5"].src=imgs[1].src;
document.images["billede3"].src=imgs[2].src;
document.images["billede1"].src=imgs[3].src;
document.images["billede2"].src=imgs[4].src;
document.images["billede4"].src=imgs[5].src;
document.images["billede6"].src=imgs[6].src;
document.images["animation"].src=imgs[0].src;
}
</script>
</head>
<body bgcolor="#000099" onload="visBilleder();" style="margin:0;">
<div style="text-align:center;">
<table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        &nbsp;
    </td>
</tr>
</table>
<table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        &nbsp;
    </td>
</tr>
</table><table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        <img name="animation">
    </td>
</tr>
</table><table width="80%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td>
        &nbsp;
    </td>
</tr>
<table width="640" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td width="160">
        <img src="" name="billede5">
    </td>
    <td width="80">
        <img src="" name="billede3">
    </td>
    <td width="80">
        <img src="" name="billede1">
    </td>
    <td width="80">
        <img src="" name="billede2">
    </td>
    <td width="80">
        <img src="" name="billede4">
    </td>   
    <td width="160">
        <img src="" name="billede6">
    </td>
</tr>
</table>
</div>

</body>

</html>
Avatar billede roenving Novice
21. maj 2003 - 19:16 #12
-- jeg havde glemt en detalje :-{

var imgs = new Array();
Avatar billede stig69 Nybegynder
21. maj 2003 - 19:20 #13
Det er så funky at det virker--
roenving-> Tak for hjælpen. Husk lige at svare så du kan få nogle point
Avatar billede roenving Novice
21. maj 2003 - 19:23 #14
muy bueno '-)
Avatar billede roenving Novice
21. maj 2003 - 19:26 #15
-- og tak for points ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
I dag 10:24 Kan Excel selv beregne alder? Af leahcim i Excel
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »