kostenloser Webspace werbefrei: lima-city

JS Ladebalken abbrechen wenn Ereigniss xy eintritt

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   juwie69

   juwie69 hat kostenlosen Webspace.

   15:54, 9.9.2010

   Hallo zusammen,
   so langsam komm ich mit meiner Routersoftware in die Finale Phase. Dabei habe ich noch folgendes Problem. Wenn ich zum Beispiel den Router neu starte wird ein Ladebalken angezeigt, der sobald er abgelaufen ist mich zur Startseite weiterleitet. Leider kann ich in dem Script nur eine feste Zeit angeben, was mir aber zu unflexiebel ist. ich hätte gern das das JS nebenbei immer wieder schaut ist die Seite schon erreichbar bevor der Blaken voll ist und wenn ja dann soll er halt auch schon vorher auf die Seite springen.
   
   

   function ladebalken($zeit){
   	print '
   		<script type="text/JavaScript">
   		var prozent = 0;
   		var blnSiteUp = true;
   		function update() {
   			if(prozent < 100 || blnSiteUp=false) {
   				document.getElementById("balken").style.width = prozent+"%";
   				prozent+=1;
   				setTimeout("update()",'.$zeit.');
   				document.getElementById("counter").innerHTML = prozent+"%";
   			}
   
   			else {
   				location.href="/content/status/status.php";
   			}
   		}
   		</script>
   
   		<div style="border:1px solid #000000; width:300px; height:20px; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px;">
     			<div style="background-color:#3565a5; width:0%; height:20px;" id="balken">
   				<span id="counter"></span> 
   			</div>
   		</div>
   
   		<div>
   			<b>Sollten Sie nach ablauf der Zeit nicht automatisch weitergeleitet werden, geben Sie Ihr Ziel bitte manuell in die Adresszeile Ihres Browsers ein.</b>
   		</div>
   
   		<script type="text/JavaScript">
   			update();
   		</script>';
   
   }

   
   
   damit ihr mal nen kleinen Blick riskieren könnt: http://yfrog.com/73greenwrtj

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   17:33, 9.9.2010

   Ich glaube Dein Ladebalken geht ein bisschen am Ziel vorbei da er das Laden der Seite ja nur vortäuscht.
   Die Seite wird ja in sowieso erst dann geladen sobald die Weiterleitung geschieht.
   Ansonsten sage ich nur ein wort:
   Ajax
4. Autor dieses Themas

   juwie69

   juwie69 hat kostenlosen Webspace.

   18:06, 9.9.2010

   ok Problem gelöst. Ich schau nach ob ein Bild geladen werden kann. 1x1px um es klein zu halten und es bekommt zum Namen jedesmal eine Zufallszahl, um den Cache zu umgehen. Startseite wird nun aufgerufen wenn Balken bei 100% ist oder wenn das Bild geladen werden kann. und hier der Code dazu, weil ich nichts vergleichbares im Netz gefunden habe:
   
   
   

   function ladebalken($zeit){
   	print '
   		<script type="text/JavaScript">
   		var prozent = 0;
   
   		function update() {
   			if(prozent < 100) {
   				document.getElementById("balken").style.width = prozent+"%";
   				prozent+=1;
   				setTimeout("update()",'.$zeit.');
   				document.getElementById("counter").innerHTML = prozent+"%";
   			}
   
   			else {
   				location.href="/content/status/status.php";
   			}
   		}
   
   
   		setTimeout("check();",5000);
   
   
   		function check() {
   
           		document.images["check_bild"].src = this.src + \'?\' + Math.random();
   
      		 	var img = new Image();
   
       			img.onload = function () {
   
            			alert(\'router ist wieder da !!!\');
   
   				location.href="/content/status/status.php";
   
      		 	};
   
      		 	img.onerror = function () {
   
           		 	// alert(\'offline\');
   
   				setTimeout("check();",9000);
       			}
   
       			img.src = "/media/check.gif" + \'?\' + Math.random();
   	
   		}
   
   
   		</script>
   
   		<img name="check_bild" src="/media/check.gif">
   
   		<div style="border:1px solid #000000; width:300px; height:20px; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px;">
     			<div style="background-color:#3565a5; width:0%; height:20px;" id="balken">
   				<span id="counter"></span> 
   			</div>
   		</div>
   
   		<div>
   			<b>Sollten Sie nach ablauf der Zeit nicht automatisch weitergeleitet werden, geben Sie Ihr Ziel bitte manuell in die Adresszeile Ihres Browsers ein.</b>
   		</div>
   
   		<script type="text/JavaScript">
   			update();
   		</script>';
   
   }

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?