Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 15:22 Der er 32 kommentarer og
1 løsning

2 javascripts på en side. Vil ikke preloade.

Hmm.. Jeg er ved at bygge en side indeholdende nogle java-rollover-images. Det fungerer såmen også fint nok, men det går bare MEGET langsomt før billederne skifter når man kører henover dem med musen. Jeg fik fortalt at jeg skulle have fat i et Preload-script, og det har jeg så gjort.
Problemet er bar at scriptet enten ikke VIL virke, eller også at jeg bare har gjort noget forkert (jeg går ud fra det er den sidste mulighed der er den rigtige).

Siden er her:

http://www.geocities.com/revolt_musik/r_profiler.htm

Der er to javascript på samme side, men jeg tror også jeg har skrevet noget forkert i .js-filen. Jeg har ingen forstand på java, så derfor ville det være rart hvis der var nogen der kunne hjælpe mig.

Preload.js filen ser sådan ud:

--------------------------------------
// Progressbar - Version 2.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL THE IMAGES ARE DONE LOADING, THE "imagesdone" VARIABLE IS SET TO "TRUE"

var imagenames=new Array( 'profiler/lasse2.gif,  , 'profiler/mads2.gif' , 'profiler/filip2.gif' , 'profiler/jesper2.gif' , 'profiler/kasper.gif' );

var yposition=250;                                  //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ;                // PROGRESS BAR COLOR
var unloadedcolor='white';                  // BGCOLOR OF UNLOADED AREA
var barheight=15;                                // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350;                                // WIDTH OF THE BAR IN PIXELS 
var bordercolor='black';                      // COLOR OF THE BORDER

//DO NOT EDIT BEYOND THIS POINT
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;
--------------------------------------

De billeder jeg har skrevet den skal preloade, er de billeder der skal vises OnMouseOver. (Hvis det er til nogen hjælp)

Den anden java-kode kan bare læses fra siden.

Er der nogen der kan fortælle mig hvad der er galt?
Avatar billede roenving Novice
18. april 2004 - 15:34 #1
Bemærk den sidste linje i det, du netop har lagt (hvorfor kun det ene script, hvis du mistænker samarbejdet for at være problemet ?-)

window.onload=loadimages;

Det vil ikke undre mig hvis der er en linje, som er ligesådan i et andet script kig og find, så er den relativt nemt løst ved at:

slette/udkommentere andre forekomster af window.onload-linjer !-)

samt:

function onstart(){
  loadimages();
  enAndenStartFunktion();
}

window.onload = onstart;
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 15:35 #2
???
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 15:36 #3
Koden til siden ser sådan ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>profiler</title>


<script language="javascript" src="progressbar.js">

/*
Preload Image (w/ progress bar) script II (By BGAudioDr@aol.com, http://www.bgaudiodr.iwarp.com/)
Script featured on Dynamicdrive.com
For full source, TOS, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
*/

</script>   



    <!-- Rollover Image Script - Place within <head> tag -->
<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
{ //start
  var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
    for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
        store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
    if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
        (store.indexOf('document.all[')==0 && document.all==null))
        store = 'document'+store.substring(store.lastIndexOf('.'),store.length);
        obj = eval(store);
    if (obj != null) {
        switcher[keep++] = obj;
      switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
      obj.src = SwitchImg.arguments[rem+2];
  } }
  document.Data = switcher;
} //end

function RestoreImg()
{ //start
  if (document.Data != null)
    for (var rem=0; rem<(document.Data.length-1); rem+=2)
      document.Data[rem].src=document.Data[rem+1];
} //end

// end hiding contents -->
</script>
   
</head>

 
<body background="back.jpg" bgproperties="fixed" bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">

<STYLE TYPE="text/css">
A { text-decoration: none; }
A:link { color: #000099; }
A:visited { color: #000099; }
</STYLE>
<font face="tahoma">


<a href="profil_kasper.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.kasper','document.kasper','profiler/kasper2.gif')"><img src="profiler/kasper1.gif" name="kasper" width="150" height="200" alt="" border="0"></a>


<a href="profil_lasse.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.lasse','document.lasse','profiler/lasse2.gif')"><img src="profiler/lasse1.gif" name="lasse" width="150" height="200" alt="" border="0"></a>


<a href="profil_mads.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.mads','document.mads','profiler/mads2.gif')"><img src="profiler/mads1.gif" name="mads" width="150" height="200" alt="" border="0"></a>


<a href="profil_jesper.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.jesper','document.jesper','profiler/jesper2.gif')"><img src="profiler/jesper1.gif" name="jesper" width="140" height="200" alt="" border="0"></a>


<a href="profil_filip.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.filip','document.filip','profiler/filip2.gif')"><img src="profiler/filip1.gif" name="filip" width="150" height="200" alt="" border="0"></a>


<br>
<br>
<br>
<center>
<font face="tahoma" size="-1" color="#000000">
<b>
<p>&lt; FIND EN FEJL &gt;</p>
</b><center>
</font>

</body>
</html>
Avatar billede roenving Novice
18. april 2004 - 15:53 #4
Du mangler en pling, og har til gengæld et komma for meget efter den første i din preload-liste:

var imagenames=new Array( 'profiler/lasse2.gif' , 'profiler/mads2.gif' , 'profiler/filip2.gif' , 'profiler/jesper2.gif' , 'profiler/kasper.gif' );
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 15:56 #5
er det det jeg skal skrive i stedet for?
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 15:59 #6
Ja, det må det jo være...
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:04 #7
Pling?
Avatar billede roenving Novice
18. april 2004 - 16:12 #8
apostrof !-)
Og i stedet for anførselstegn eller gåseøjne er det ikke sjældent at se 'gnyffer' eller dobbelt-plinger brugt ...
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:13 #9
ok.. det virker stadig ikk
Avatar billede roenving Novice
18. april 2004 - 16:16 #10
Du har ikke de streger med ?-)

--------------------------------------
// Progressbar - Version 2.0
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:23 #11
nej
Det var bare for at vise hvor det sluttede og startede.. :)
Avatar billede roenving Novice
18. april 2004 - 16:31 #12
-- det virker hos mig ...

Får du nogen fejl (f.eks. den lille gule trekant i venstre hjørne ?-)

-- og hvad siger de så ...
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:32 #13
Kan du ikk lii give mig den kode du har til siden, og den kode du har til .js-filen.. Så kan jeg se om det også virker på nettet..
Avatar billede roenving Novice
18. april 2004 - 16:51 #14
Jeg har taget nøjagtig din kode, men så af hensyn til min harddisk lagt det direkte i webwriteren med preload-scriptet kopieret ind i ...

Det har endnu ikke givet andet end mappe-forskelle, når jeg har checket det med egentlige filer, så jeg er ret sikker på, at der må være noget andet (f.eks. mappe-adressering !-)
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:54 #15
Nåh, ups.. min fejl.. d virker nu..
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:54 #16
men... Er det muligt at billederne ikke kommer frem før den har loaded dem?
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:56 #17
Altså, så man bare ser den der loading-bar indtil..
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 16:57 #18
Du får selvfølgelig points allerede.. bare send et svar :) Tak for hjælpen!
Avatar billede roenving Novice
18. april 2004 - 17:11 #19
Måske kan du se noget, du kan bruge her: http://www.eksperten.dk/spm/361919, hvor der er en load-intro-ting ...

-- og velbekomme '-)
Avatar billede roenving Novice
18. april 2004 - 17:25 #20
-- og tak for points ;~}
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 18:18 #21
Hmm... Jah.. Nu har jeg sådan set fået det til at virke.. Sidens indhold bliver først vist efter fem sekunder.. Men.. Det gør progress-baren også.

Hvad skal jeg lave om?

Her er koden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>profiler</title>



<script language="javascript" src="progressbar.js">

/*
Preload Image (w/ progress bar) script II (By BGAudioDr@aol.com, http://www.bgaudiodr.iwarp.com/)
Script featured on Dynamicdrive.com
For full source, TOS, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
*/

</script>   



    <!-- Rollover Image Script - Place within <head> tag -->
<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
{ //start
  var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
    for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
        store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
    if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
        (store.indexOf('document.all[')==0 && document.all==null))
        store = 'document'+store.substring(store.lastIndexOf('.'),store.length);
        obj = eval(store);
    if (obj != null) {
        switcher[keep++] = obj;
      switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
      obj.src = SwitchImg.arguments[rem+2];
  } }
  document.Data = switcher;
} //end

function RestoreImg()
{ //start
  if (document.Data != null)
    for (var rem=0; rem<(document.Data.length-1); rem+=2)
      document.Data[rem].src=document.Data[rem+1];
} //end

// end hiding contents -->
</script>
   
</head>

 
<body background="back.jpg" bgproperties="fixed" bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">

<span id="loading" style="display:block;">
<script language="javascript" type="text/javascript">
function displaySiden(){
if(document.all){l=document.all['loading'];s=document.all['siden'];
}else if(document.getElementById){l=document.getElementById('loading');s=document.getElementById('siden');}
l.style.display = 'none'; s.style.display = 'block';}
setTimeout("displaySiden()",3000);
</script>


<!-- Text her -->



</span>
<div id="siden" STYLE="display:none;">




<STYLE TYPE="text/css">
A { text-decoration: none; }
A:link { color: #000099; }
A:visited { color: #000099; }
</STYLE>
<font face="tahoma">


<a href="profil_kasper.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.kasper','document.kasper','profiler/kasper2.gif')"><img src="profiler/kasper1.gif" name="kasper" width="150" height="200" alt="" border="0"></a>


<a href="profil_lasse.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.lasse','document.lasse','profiler/lasse2.gif')"><img src="profiler/lasse1.gif" name="lasse" width="150" height="200" alt="" border="0"></a>


<a href="profil_mads.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.mads','document.mads','profiler/mads2.gif')"><img src="profiler/mads1.gif" name="mads" width="150" height="200" alt="" border="0"></a>


<a href="profil_jesper.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.jesper','document.jesper','profiler/jesper2.gif')"><img src="profiler/jesper1.gif" name="jesper" width="140" height="200" alt="" border="0"></a>


<a href="profil_filip.htm" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.filip','document.filip','profiler/filip2.gif')"><img src="profiler/filip1.gif" name="filip" width="150" height="200" alt="" border="0"></a>


<br>
<br>
<br>
<center>
<font face="tahoma" size="-1" color="#000000">
<b>
<p>&lt; FIND EN FEJL &gt;</p>
</b><center>
</font>

</body>
</html>
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 18:19 #22
Progress-baren skulle jo gerne loade, mens indholdet er skjult...
Avatar billede roenving Novice
18. april 2004 - 18:38 #23
Prøv engang:

I stedet for en <span id="loading" ... så:

<div id="loading" ... og selvfølgelig så en </div> i stedet for </span>


og så i scriptet i .js-filen er der en linje, som hedder:

document.write(txt);

-- den laver du om til

document.getElementById('loading').innerHTML += txt;

-- og så flytter du kaldet ned efter </body>-tagget !-)

altså:

</body>
<script language="javascript" src="progressbar.js">

/*
Preload Image (w/ progress bar) script II (By BGAudioDr@aol.com, http://www.bgaudiodr.iwarp.com/)
Script featured on Dynamicdrive.com
For full source, TOS, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
*/

</script>
</html>

Ved ikke om det vil virke, men det er et bud !o]
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 20:31 #24
Nej. Det virker ikke.. Når jeg gør det forsvinder progress-baren helt..
Men jeg har fået det til at virke. Jeg laver bare ventetiden om til 10000, så begynder den at loade lige før billederne dukker op..

Men ellers tak for hjælpen.. :)
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 20:35 #25
Hmm.. Har lige fundet ud af at det kun virker hvis man har samme internet-hastighed... Er den hurtigere glor man bare på en tom skærm i et stykke tid, og er den langsommere, kommer billederne frem før den begynder at loade.. Øv.. :(
Avatar billede omtus_komikatus Nybegynder
18. april 2004 - 20:47 #26
Jeg ved ikke om det her bare er ren volapyk, og hvis det er, så lad være at hæng mig op på det, men kan man ikke gøre noget med at når 'imagesdone' i js-filen er 'True', Så skal det andet Java script, vise siden.. (det der span/Block.display-ting-noget)

Der skal jo nok være en eller anden ting, som jeg har overset, der gør at det ikke er muligt.. Men...

???
Avatar billede roenving Novice
18. april 2004 - 21:28 #27
Jo, men jeg satte mig ikke så meget ind i, hvordan preload-baren virkede, men ideen er helt gangbar, og sagtens mulig !-)

Du skal bare tage den kode, som skjuler hhv. viser og kopiere den over til preloader-koden !o]
Avatar billede omtus_komikatus Nybegynder
19. april 2004 - 16:41 #28
Det forstod jeg sådan set cirka -10,8% af... Hmmm.. Kan du hjælpe mig?
(Du kan sagtens få flere points hvis det er det)
???
Avatar billede roenving Novice
19. april 2004 - 17:21 #29
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
displaySiden();
}


-- og så fjerner du setTimeout-tingen i den span ...
Avatar billede omtus_komikatus Nybegynder
19. april 2004 - 17:36 #30
Hvor ska j sætte det ind?
Avatar billede roenving Novice
19. april 2004 - 17:40 #31
I stedet for det, som står inde i .js-filen, som er næsten ens ...
Avatar billede omtus_komikatus Nybegynder
19. april 2004 - 17:59 #32
ok.. tak for hjælpen! :)
Det virker... hehe...
Avatar billede roenving Novice
19. april 2004 - 18:01 #33
U'r welcome ,-)
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

Seneste spørgsmål Seneste aktivitet
I dag 10:21 Ny printer, men hvilken Af mort1 i Printere
I går 19:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging