Ladestatus anzeigen?

E

emuume

Mitglied
Hi ihr!

Letztens kam mir die tolle Idee einen Ladebalken zu schreiben. Soweit sogut, der Balken ist fertig. Ich hatte mal was von onload gehört und habe ihn darauf ausgerichtet. Ich dachte, onload wird ausgeführt, wenn das Objekt fertig geladen ist und wollte mit jedem fertig geladenem Objekt den Balken fortschreiten lassen. Dem ist aber nicht so. onload darf nur im frameset oder im body verwendet werden. Wie kann ich mein Problem nun lösen? Hat einer ne Idee?
 
So, habe nun ein bischen rumprobiert und stehe nun vor einem komischen Problem:

Solange ich in einer Funktion den Inhalt der Variablen zur Kontrolle mit alert anzeige, funktioniert das Script. Sobald ich aber das alert entferne, bleibt das Script hängen. Ich gehe davon aus dass es an der Zeit liegt. Wird alert eingeblendet, hat das Script genug Pause, die Bilder werden im Hintergrund geladen und alles ist gut. Ohne das alert ist das Script beschäftigt und bleibt hängen. Habe auch schon mit timeout versucht, das Script zu unterbrechen, kein Erfolg.

hier der code:
(An der Stelle des Sterns habe ich mein alert)

<script>
function inc(){hier wird der balken vergrößert}

function fertig(){
*
if (document.images[i-1].complete == true){
inc();
i++;
}
}
</script>

<hier werde die bilder geladen>

<script>
i=1;
while (i<=document.images.length){
fertig();
}
</script>

danke für eure hilfe!
 
Ich habe nun nochmal mit Timeout rumgetestet:

wenn ich window.setTimeout(fertig(),10) schreibe, geht er einmal in die funktion rein und beim 2. mal meckert er rum von wegen ungültiges argument.

schreibe ich aber window.setTimeout("fertig()",10), dann geht er garnich erst in die funktion rein!

was mach ich falsch?
 
Mit complete wird das nichts. Schau dir einfach die Beiträge zu den diversen Preloadern hier im Forum an. Man braucht doch nicht das Rad neu erfinden, wenn es schon Düsenjets gibt.
Deine setTimeout Schleife funktioniert aus drei Gründen nicht richtig:
1.) Du hast keine Abbruchbedingung, es ist also eine Endlosschleife
2.) Wenn du das while durch setTimeout ersetzt wird i immer größer - solange bis es kein Bild mit der Nummer gibt und dann verursacht dieses Tatsache einen "Ungültiges Objekt"-Fehler.
Ansonsten kann ich keinen Fehler sehen. Sicher, dass deine inc()-Funktion Fehlerfrei ist? Auch ist es schwierig zu sagen, wo der Fehler liegt ohne den ganzen Code zu sehen, denn ich vermute ja, dass der Fehler ganz woanders liegt.

Allgemein eignet sich aber auch complete nicht wirklich für dein Vorhaben. Das hat mehre Gründe, die du bei selfhtml nachlesen kannst, wenn du willst.

P.S.
Auch deine Tastatur hat eine Shift-Taste, nutze sie, genau wie du Code-Boxen nutzen solltest! Auch Wörter, wie "Funktion", "Argument" und "Alert" schreiben sich im Deutschen groß (sogar die Englischen). Am besten lese dir diesen ganzen Thread und die Netiquette durch.
 
Zuletzt bearbeitet von einem Moderator:
- wenn das mit complete nichts wird, frage ich mich, was der gute Mann http://www.ulf-theis.de/tutorials/dreamweaver/javascript/tut_preloader.php
hier programmiert hat?

- wenn du meine Beiträge richtig lesen würdest, dann würdest du sehen, dass meine Tastatur eine Shift-Taste hat und ich sie auch nutze! Ich bitte vielmals um Verzeihung dass ich sie nicht jedesmal benutz!

PS: Wenn du dich schon genötigt fühlst was zu Antworten, dann gib qualifizierte Antworten!
 
Okay, let's deduce this with professor confus:

Ich sage, es "eignet sich aber auch complete nicht wirklich für dein Vorhaben".
Du fragst dich, was "der gute Mann hier programmiert hat".
Dir ist klar, dass du damit voll an der Aussage meines Satzes vorbeigeschossen bist? Nur dass es sich nicht wirklich eignet, heißt nicht, dass man nicht trotzdem ein brauchbares Script damit schreiben kann. Es heißt, dass es unnötige Probleme verursachen kann, nicht muss.

Ich sage "auch Wörter, wie 'Funktion', 'Argument' und 'Alert' schreiben sich im Deutschen groß".
Du sagst, ich solle deine "Beiträge richtig lesen".
Wieder voll vorbei. Wenn ich deine Beiträge nicht gelesen hätte wüsste ich wohl kaum, dass es um Preloader geht und noch weniger, dass du bestimmte Wörter, die groß gehören konsequent klein schreibst. Ich bin zwar gut, aber Hellsehen kann ich noch nicht, zumindest nicht ohne meine Kristallkugel.

Ich sage "...Endlosschleife...", "...kein Bild mit dieser Nummer...", "...Preloader...".
Du sagst "gib qualifizierte Antworten".
Was zur Hölle waren denn das bitte? Lies du meine Beiträge! Ich habe dir gesagt du hast eine Endlosschleife gebastelt und provozierst Fehler, habe dir gesagt, dass es solche Scripts, wie du eins machen willst schon gibt, was sollte ich noch Qualifizierteres dazu sagen? Wenn du meine Qualifikationen in Frage stellst, dann schau dir deine Beiträge an und danach meine und vergleiche mal ihre Zahl. Solange nicht so etwas kommt, wie dein Beitrag eben, gebe ich immer qualifizierte Antworten und wenn dich mein Ton, oder meine Polemik stören, ist es keine gute Idee auch beides herauszufordern.

Du möchtest hier Hilfe, hälst dich aber nicht an die Regeln und stänkerst andere an, die dir geholfen haben.

Wenn du noch einen Tipp haben willst: Dein Script steht so wie es ist im <body>, richtig? Schon mal daran gedacht, dass es die Bilder erst für Javascript gibt, wenn der Browser ihren Code eingelesen hat (Achtung: Einlesen heist nicht geladen)? Wenn nun das Script aber vor dem Code ausgeführt wird, gibt es aber auch Probleme. Bevor du mich hier wieder falsch verstehst: Ich sage nicht, dass es tatsächlich so ist, sondern nur, dass es so sein könnte und es einen Grund gibt wieso bei dem „guten Mann“ noch was von new Image() usw. steht.
 
Zuletzt bearbeitet:
:)

Du verdrehst gerade die Tatsachen etwas. Du hast doch deinen vorletzten Beitrag editiert. Ich habe deine erste Version gelesen und daraufhin meine Antwort geschrieben. Dass diese nun auf deinen editierten Beitrag nicht mehr passt, dafür kann ich nichts :)

So und nun zum Thema. Ich gehe folgendermaßen vor: Ich setze mir ein Problem und dieses gilt es zu lösen. Dabei nutzt es mir recht wenig, wenn ich fertige Preloader-Scripte kopiere. Ich bin bei meinem Weg auf ein Problem gestoßen und wollte wissen, wie ich dieses vermeiden kann. Wenn ich da als Antwort bekomme: "Du machst alles falsch, lies richtig, damit geht es nicht" (so sah dein uneditierter Beitrag aus), hilft mir das nicht.

Nochmal zu meinem Problem: ich bin in js so konform, daß ich Endlosschleifen erkenne und vermeiden kann. Auch bin ich mir dessen bewusst, dass ich nicht im Script ein Objekt handeln kann, welches erst später definiert wird (wie aus meinem geposteten Code auch ersichtlich, da werden die Bilder VOR dem handle geladen).

Apropos keine Abbruchbedingung, was ist dann das:
while (i<=document.images.length){...i++;...}

Un da sagst du mir, ich lese nich richtig :)

So, zum Tthema: Ich hatte gefragt, warum

window.setTimeout(fertig(),10); beim ersten Schleifendurchlauf funktioniert (die funktion wird ausgeführt), beim zweiten Durchlauf aber "ungültiges Objekt" kommt.

warum window.setTimeout("fertig()",10) die funktion garnicht erst aufruft

und woran es liegen kann, dass das Script, wenn ich eine durch alert() hervorgerufene Verzögerung (unabsichtlich) eingebaut habe, es aber ohne alert() nicht funktioniert.

Wenn ich programmiere, möchte ich auch die Sprache verstehen, dabei nutzt es nichts, wenn ich das Problem nur umgehe, aber nicht verstehe, warum es so nicht funktioniert.

So, und hier noch der komplette Code

Code: 
<script type="text/javascript">
function setparam(wert){
 anzahl=wert;
 teiler   =1000/anzahl;
}
function data(){
 ppos   =document.getElementById('bar').style.width.indexOf("p");
 document.getElementById('text').innerHTML=document.getElementById('bar').style.width.substring(0,ppos-1)+"%";
}
function vis(){
 document.getElementById('barwindow').style.visibility="hidden";
}
function inc(){
 loads++;
 if(loads>=anzahl){vis();}
 else{
  ppos   =document.getElementById('bar').style.width.indexOf("p");
  percent   =Number(document.getElementById('bar').style.width.substring(0,ppos))+teiler;
  if(percent>=1000){
   vis();
  }
  else{ 
   document.getElementById('bar').style.width=String(percent)+"px";
   data();
  }
 }
}
function reset(){
 document.getElementById('bar').style.width="0px";
 document.getElementById('text').innerHTML="0%";
 anzahl    =100;
 loads    =0;
 teiler    =10;
}
function fertig(){
 if (document.images[i].complete == true){
  inc();
  i++;
 }
}
</script>
<body>
<div id="barwindow" style="position:absolute; top:0px; left:0px; z-index:2; visibility:visible; background-color:#ffff00;">
 <table style="height:768px;width:1024px" cellspacing="0" cellpadding="0" border="1"><tr><td align="center" valign="middle">
  <table style="width:1005px" cellspacing="0" cellpadding="0" border="1">
   <tr>
    <td width="1005px" height="10px" align="left" >
     <table border="0" cellspacing="0" cellpadding="0"><tr>
      <td id="bar" style="background-color:#0000ff; width:0px; height:15px"></td>
      <td style="position:absolute; top:377px; left:500px;"><font id="text" style="font-size:8pt;text-align:center">0%</font></td>
     </tr></table>
    </td>
   </tr>
  </table>
 </td></tr></table>
</div>
<script>reset();setparam(40);</script>
 
<!--
ins nachfolgende div wird die hauptseite eingebunden. in jedes große zu ladende objekt (zb bilder) werden onLoad=inc(); aktionen eingebunden, die den fortschritt anzuzeigen
-->
<div style="position:absolute; top:0px; left:0px; z-index:1; background-color:#00ffff;">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
<img src="pics/background/design.bmp">
</div>
<script>
i=0;
while (i<document.images.length){
//alert(i); <-- dieses alert ist dasjenige welches ich oben beschieben habe
 fertig();
}
</script>
</body>
</html>

PS: ich möchte mich keinesfalls absichtlich gegen irgendwelche Regeln stellen oder Leute herausfordern, möchte aber auch fair behandelt werden :)
Hoffe nun sind alle Ungereimtheiten beseitigt
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück