[javascript] In delen pre-loaden...

[Verwijderd]

Ik heb een simpel slide-show scriptje gemaakt, maar zoals het nu is preload ie alles in 1 keer, ik zit nu te zoeken naar een optie om hem om de 5 plaatjes o.i.d. een stukje te laten pre-loaden. Hier even de code en dan geef ik daarna nog wel wat extra toelichting .

in de head:

JavaScript:

<SCRIPT type="text/javascript">
  var num=0
  var num=0
  img0 = new Image ()
  img0.src = "pic1.gif"
  img1 = new Image ()
  img1.src = "pic2.gif"
  img2 = new Image ()
  img2.src = "pic3.gif"  
  img3 = new Image ()
  img3.src = "pic4.gif"
  img4 = new Image ()
  img4.src = "pic5.gif"
  img5 = new Image ()
  img5.src = "pic6.gif"
  img6 = new Image ()
  img6.src = "pic7.gif"
  img7 = new Image ()
  img7.src = "pic8.gif"
  img8 = new Image ()
  img8.src = "pic9.gif"  
  img9 = new Image ()
  img9.src = "pic10.jpg"
  imgtxt=new Array()
  imgtxt[0]="1 - Wirlwinds"
  imgtxt[1]="2 - Shocker"
  imgtxt[2]="3 - Fantasy"
  imgtxt[3]="4 - Vulcanic Wirlwinds"
  imgtxt[4]="5 - Star In The Middle"
  imgtxt[5]="6 - Deadly Flower"
  imgtxt[6]="7 - Eye's"
  imgtxt[7]="8 - Purple Depth"
  imgtxt[8]="9 - Skyline"
  imgtxt[9]="10 - Golden Metal" 
 function slideshow()
  {
   num=num+1
   if (num==10)
    {num=0}
 document.mypic.src=eval("img"+num+".src")
 document.getElementById("txt1").innerHTML=imgtxt[num]
   }
   
 function slideshowBack()
  {
   num=num-1
   if (num==-1)
    {num=9}
 document.mypic.src=eval("img"+num+".src")
 document.getElementById("txt1").innerHTML=imgtxt[num]
   }


 function slideshow10()
   {
    num=9
    document.mypic.src=eval("img"+num+".src")
    document.getElementById("txt1").innerHTML=imgtxt[num]
   }
   
 function slideshow5()
  {
   num=4
document.mypic.src=eval("img"+num+".src")
document.getElementById("txt1").innerHTML=imgtxt[num]
   }
</SCRIPT>

in body (niet erg interressant, maar ik post het toch maar even...)

JavaScript:

[img]"pic1.gif"[/img]
<div id="txt1">1 - Wirlwinds</div>

<p align="center">
<A HREF="JavaScript:slideshowBack()">
   Previous</A><font color="#FFFFFF"> -</font> <A HREF="JavaScript:slideshow()">Next</A>
 <p align="center"><font color="#FFFFFF"><a href="javascript:slideshow5()">5</a> - <a href="javascript:slideshow10()">10</a>

Ik weet 't, een beetje rommelig gedaan in de body, maar dat komt later nog wel .
De bedoeling is nu eigenlijk dat ik er een loop bij kan zetten van bijv. zoiets als:
if van num==5 -> preload volgend stuk
if var num==10 -> preload volgend stuk
en ga zo maar door... is er een goede manier om dit te doen (ik zat de denken aan functions maar kreeg 't niet echt werkend ...ook heb ik flink wat rondgeneuzeld op internet, maar heb niks gevonden....)

alvast bedankt...

[ Voor 31% gewijzigd door Verwijderd op 17-04-2003 17:07 ]

[Verwijderd]

code:

function slideshow(arg)
  {
   num=arg
   if (num==-1)num=9;
  if (num==10)num=0;
 document.mypic.src="img"+num+".src";
 document.getElementById("txt1").innerHTML=imgtxt[num];
   }

<A HREF="JavaScript:slideshow(num-1)">
   Previous</A><font color="#FFFFFF"> -</font> <A HREF="JavaScript:slideshow(num+1)">Next</A>
 <p align="center"><font color="#FFFFFF"><a href="javascript:slideshow(5)">5</a> - <a href="javascript:slideshow(5)">10</a>

Zo heb je als het goed is maar 1 functie nodig. Ik zeg niet dat dit het beste is hoor. Zo maar in elkaar geflanst...

[Verwijderd]

Verwijderd schreef op 17 April 2003 @ 17:19:

code:

stukkie code...

Zo heb je als het goed is maar 1 functie nodig. Ik zeg niet dat dit het beste is hoor. Zo maar in elkaar geflanst...

Oowjah...goede oplossing, niet echt aan gedacht, bespaart heel wat ellende met functions....thnx. Maareuh, weet er iemand of het mogelijk is in delen te preloaden??

[Verwijderd]

code:

var img=[];
for (i=0;i<=9;i++){
img[i].txt='';
}
img[0].txt='balhalahah';
img[1].txt='balhalahah2'; etc..


function preload(arg1,arg2){
for (i=arg1;i<=arg2;i++)
{
img[i]={};
img[i].img=new Image();
img[i].img.src='pic'+i+'.gif';
}

}

Zo valt die beginrij ook te reduceren. Meteen een preload-functie erbij. Direct al preload(0,5) aanroepen. In de slideshow functie nog een if statement met: if (arg>=5) preload(5,9)
Zoiets en dan zou het ongeveer moeten werken. Waarschijnlijk kan het nog wel beter.

edit:
O ja, dit moet ook worden aangepast in de functie slideshow:
document.mypic.src=img[num].img.src;
document.getElementById("txt1").innerHTML=img.txt[num];
Er zullen nog wel meer fouten inzitten

[ Voor 30% gewijzigd door Verwijderd op 17-04-2003 17:42 ]

[Verwijderd]

Euhm....kben niet echt een doorgewinterde javascripter, dus ik snap zo even niet geheel hoe 't werkt...maar ik zal het wel ff bekijken

Er zullen nog wel meer fouten inzitten

ongetwijfelt ...dis het eerste script dak zelf in elkaar geknutseld heb die ook nog een fantsoenlijke functie heeft (de andere waaren allemaal maar probeerseltjes om uit te vinden hoe alles werkte)

in elk geval hardstikke bedankt

[ Voor 53% gewijzigd door Verwijderd op 17-04-2003 17:41 ]

[Verwijderd]

Ik ben nu dus maar begonnen om m'n script aan te passen, maar ik loop tegen de ene error na de ander, heeft iemand enig wat er aan de hand is?
De laatste error die ik niet op heb kunnen lossen is:

Regel: 9
Teken: 1
Fout: 'img[...]' is leeg of geen object

ook heb ik maar een var i aangemaakt aangezien ik ook de error kreeg dat i niet gedefineerd was
maar goed, hier is de code:

JavaScript:

<HTML>
<HEAD>
<SCRIPT type="text/javascript">
var i=0;
var img=[];
for (i=0;i<=9;i++){
img[i].txt='';
}
img[0].txt='1 - Wirlwinds';
img[1].txt='2 - Shocker';
img[2].txt='3 - Fantasy';
img[3].txt='4 - Vulcanic Wirlwinds';
img[4].txt='5 - Star In The Middle';
img[5].txt='6 - Deadly Flower';
img[6].txt="7 - Eye's";
img[7].txt='8 - Purple Depth';
img[8].txt='9 - Skyline';
img[9].txt='10 - Golden Metal';

function preload(arg1,arg2){
for (i=arg1;i<=arg2;i++);
{
img[i]={};
img[i].img=new Image();
img[i].img.src='pic'+i+'.gif';
}
  var num=0
  img0 = new Image ()
  img0.src = "pic1.gif"
  img1 = new Image ()
  img1.src = "pic2.gif"
  img2 = new Image ()
  img2.src = "pic3.gif"  
  img3 = new Image ()
  img3.src = "pic4.gif"
  img4 = new Image ()
  img4.src = "pic5.gif"
  img5 = new Image ()
  img5.src = "pic6.gif"
  img6 = new Image ()
  img6.src = "pic7.gif"
  img7 = new Image ()
  img7.src = "pic8.gif"
  img8 = new Image ()
  img8.src = "pic9.gif"  
  img9 = new Image ()
  img9.src = "pic10.jpg"
function slideshow(arg)
  {
   num=arg
   if (num==-1)num=9;
  if (num==10)num=0;
document.mypic.src=img[num].img.src;
document.getElementById("txt1").innerHTML=img.txt[num];
   }
   
   
 function slideshow10()
   {
    num=9
    document.mypic.src=eval("img"+num+".src")
    document.getElementById("txt1").innerHTML=imgtxt[num]
   }
   
 function slideshow5()
  {
   num=4
document.mypic.src=eval("img"+num+".src")
document.getElementById("txt1").innerHTML=imgtxt[num]
   }
}
</SCRIPT>

de body is in dit geval denk ik al helemaal niet interressant, iemand enig idee wat ik fout doe

[ Voor 12% gewijzigd door Verwijderd op 17-04-2003 18:55 ]

[Verwijderd]

Ja sorry. Ik zei al dat ik het niet echt zorgvuldig in elkaar geflansd had.

In het begin dit veranderen:
for (i=0;i<=9;i++){
img[i].txt='';--> moet zijn img[i]={}; --> die plek waar die nu staat mag die dan weg
}

[Verwijderd]

Verwijderd schreef op 17 April 2003 @ 19:14:
Ja sorry. Ik zei al dat ik het niet echt zorgvuldig in elkaar geflansd had.

In het begin dit veranderen:
for (i=0;i<=9;i++){
img[i].txt='';--> moet zijn img[i]={}; --> die plek waar die nu staat mag die dan weg
}

ah...thanks

[edit:] oow...nog een fout... regel 1, teken1, object wordt verwacht
btw, martijn, heb je msn???

[ Voor 22% gewijzigd door Verwijderd op 17-04-2003 19:35 ]

[Verwijderd]

Sorry, ik was even weg. Nee, ik heb geen msn.
Maar ik geef je hier de code. Deze werkt volgens mij bij mij wel (ik heb het niet met plaatjes gecontroleerd).

HTML:

<HTML><HEAD></head><body>
[img]"pic1.gif"[/img]
<div id="txt1">1 - Wirlwinds</div>
<A HREF="JavaScript://" onclick="slideshow(num-1)">
Previous</A> - <A HREF="JavaScript://" onclick="slideshow(num+1)">Next</A>
<a href="javascript://" onclick="slideshow(5)">5</a> - 
<a href="javascript://" onclick="slideshow(9)">10</a>
<SCRIPT type="text/javascript">
var i=0;
var img=[]; 
var num=0;
for (i=0;i<=9;i++){
img[i]={};
}

img[0].txt='1 - Wirlwinds';
img[1].txt='2 - Shocker';
img[2].txt='3 - Fantasy';
img[3].txt='4 - Vulcanic Wirlwinds';
img[4].txt='5 - Star In The Middle';
img[5].txt='6 - Deadly Flower';
img[6].txt="7 - Eye's";
img[7].txt='8 - Purple Depth';
img[8].txt='9 - Skyline';
img[9].txt='10 - Golden Metal';

function preload(arg1,arg2){
for (i=arg1;i<=arg2;i++)
{
img[i].img=new Image();
img[i].img.src='pic'+i+'.gif';
}}

preload(0,4);
gepreload=false;
function slideshow(arg)
  {
num=arg;
if (num==-1)num=9;
if (num==10)num=0;
if ((num>=5)&&(num<=9)&&(gepreload==false)){preload(5,9);gepreload=true;};
document.getElementById('mypic').src=img[num].img.src;
document.getElementById("txt1").innerHTML=img[num].txt;
   }  
</SCRIPT>
</body></html>

[Verwijderd]

Verwijderd schreef op 18 April 2003 @ 00:39:
Sorry, ik was even weg. Nee, ik heb geen msn.
Maar ik geef je hier de code. Deze werkt volgens mij bij mij wel (ik heb het niet met plaatjes gecontroleerd).

HTML:

Nogmaals een prachtig stukje code :)

Ik kan je wel zoenen ...'t werkt niet helemaal meer met de plaatjes erbij, maar niks dat ik niet kan verhelpen