Während Browser lädt JS ausführen

Maniac

Maniac

Erfahrenes Mitglied
Moin,

Ich suche ein Gegenstück zu windows.onload und wie man es richtig implementiert.
Ich möchte eine Funktion erstellen welche beim laden der Seite oder per Eventhandler (zb Formular abschicken) eine Ladegrafik anzeigt.

ich habe es schon zum testen mit:
Code: 
<script type="text/javascript">
		if(!window.onload){
			alert('seite ladet');
		}else if(window.onload){
			alert('seite hat geladen');
		}
	</script>

versucht, aber glaube nicht das es das ist was ich suche. Gibt es da ne elegantere Methode?
 
Du zeigst die Ladegrafik an, sobald das JavaScript ausgeführt wird und versteckst sie wieder, wenn die Seite fertig geladen ist.
Du könntest die Ladegrafik auch ohne JavaScript dauerhaft einblenden und erst mit JS verstecken, aber user ohne JS sehen dann immer die Ladegrafik.

Javascript: 
document.title = "Seite wird geladen...";

window.onload = function() {
    document.title = "Seite ist fertig!";
};

Anstelle von document.title wäre wohl die übliche Lösung die Ladegrafik per
document.getElementById("ladegrafik").style.display = "block";
anzuzeigne und per
document.getElementById("ladegrafik").style.display = "none";
zu verstecken.

Und da du von Funktion geredet hast, kannst du es so kapseln.
Javascript: 
ladenStart();

window.onload = function() {
    ladenStop();
};

function ladenStart() {
    document.title = "Seite wird geladen...";
}

function ladenStop() {
    document.title = "Seite ist fertig!";
}
 
Danke dir, das bringt mich auf den richtigen Weg :-)
Hab jetzt eben feststellen müssen, das was ich da eigentlich vor hatte so nicht zu bewältigen ist.
Das ich während des ladens nur einen Bereich der Seite ausblende. Aber dieses ist ja nur mit AJAX zu schaffen.
 
Moin,

hier mal ein möglicher Lösungsansatz:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-09-20" />
<title>Test</title>
<script type="text/javascript">
<!--
window.onload=function()
{
  document.getElementsByTagName('html')[0].className='';
}
document.getElementsByTagName('html')[0].className='preload';
//-->
</script>
<style type="text/css">
<!--
#div1,.preload #div2{display:none;}
.preload #div1{display:block;}
#div1,#div2{background:firebrick;color:#fff;padding:3px;font-weight:bold;}
#div2{background:DarkGreen}
-->
</style>
</head>
<body>
<div id="div1">...lade</div>
<div id="div2">ich habe fertig</div>
Der Rest ist immer sichtbar

</body>
<script type="text/javascript">
<!--
//Verzögerung simulieren
sleep=function(s)
{
  if(!isNaN(s))
  {
    var img=new Image();
    img.src='http://doktormolle.de/temp/sleep.php?s='+s+'&'+new Date().getTime();
  }
}
sleep(5);
//-->
</script>
</html>

Was wird gemacht:
gleich im <head> wird per Skript dem <html>-Element ein Klassenname verpasst.
Dieser bietet sodann den Ansatz für einen Selektor, um Elemente anzuzeigen oder zu verstecken, ohne auf die Elemente selbst per Skript zugreifen zu Müssen(ich nehme mal an, darin liegt dein Problem...Elemente kann man per Skript ja erst manipulieren, wenn sie gelesen wurden)

Beim onload wird dieser Klassenname wieder entfernt, fertig :)
 
Soweit kann ich Dir schon folgen.
Aber mein Problem besteht darin das ich sagen wir mal beim absenden eines Formulares welches etwas länger braucht zum verarbeiten, quasi während der Browser lädt, diesen Bereich ersetzen möchte.
Nach deiner Variante funktioniert das ja nicht, weil ja bei jedem Request die Elemente verstekct/ersetzt werden. Oder wäre das per Event-Handler auch möglich?
 
Das wäre etwas anders, denn da geht es weniger um den onload der Seite(Formularziel) sondern eher um den onunload der aktuellen Seite(die mit dem Formular).

Du könntest da den onsubmit-Handler des Formulars überwachen, und vor dem Senden das besagte Element manipulieren.
 
Würde das so in etwa funktionieren?
Bitte das PHP jetzt nicht documentieren, soll nur Symbolisch für diesen Post sein.
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-09-20" />
<title>Test</title>
<?php if($_POST['submit]){ ?>
<script type="text/javascript">
<!--
window.onload=function()
{
  document.getElementsByTagName('html')[0].className='';
}
document.getElementsByTagName('html')[0].className='preload';
//-->
</script>
<style type="text/css">
<!--
#div1,.preload #div2{display:none;}
.preload #div1{display:block;}
#div1,#div2{background:firebrick;color:#fff;padding:3px;font-weight:bold;}
#div2{background:DarkGreen}
-->
</style>
<?php } ?>
</head>
<body>
<div id="div1">...lade</div>
<div id="div2">ich habe fertig</div>
Der Rest ist immer sichtbar
 
</body>
</html>
 
Maniac_81 hat gesagt.:
Würde das so in etwa funktionieren?
Zum Vergrößern anklicken....

Eher nicht :D

Es wäre wichtig zu wissen, wo sich der Ladevorgang verzögert.

Hast du viele Formulardaten, welche gesendet werden müssen, dann dauert es auf der Absenderseite. Dies wäre z.B. der Fall, wenn grosse Dateien mit dem Formular upgeloadet werden.
In diesem Fall müsste die Absenderseite manipuliert werden.

Dauert es hingegen, weil die Verarbeitung der Formulardaten zeitraubend ist, und es müsstest du die Empfängerseite manipulieren.


Warum dauert es nun?
 
Jepp, es sind einige Formularfelder welche abgesendet werden. Bis zu 80 stck. Ich arbeite mit dem Zend Framework und MVC. Also formular wird gesendet an die selbe Seite/Action->Formular wird validiert->validierte Daten werden an Model weitergegeben zum verarbeiten->wenn verarbeitung fertig, dann weiterleitung auf Controller.

Und hier liegt der Hund begraben. Die User welche die Daten eingeben sind nicht alle sehr bewandert mit dem Internet *gg*. Es gibt da einige die dann solange auf den Senden-Button klicken bis sie eine Reaktion vom Brwoser erkennen..... Und da gibt es halt doppelte Einträge.
Deshalb möchte ich nach dem Senden des Formulares einfach das Formular gegen die Ladegrafik tauschen. Klar könnten die User dann per Aktualisieren das selbe erreichen, aber da würde dann wenigsten noch eine Abfrage kommen ob das Formular erneut gesendet werden soll.
 
Das ginge dann so:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-09-20" />
<title>Test</title>
<script type="text/javascript">
<!--
function submitFN()
{
  document.getElementsByTagName('html')[0].className='preload';
  return true;
}
//-->
</script>
<style type="text/css">
<!--
#div1,.preload #div2{display:none;}
.preload #div1{display:block;}
#div1,#div2{background:firebrick;color:#fff;padding:3px;font-weight:bold;}
#div2{background:DarkGreen}
-->
</style>
</head>
<body>
<div id="div1">Formular wird gesendet</div>
<div id="div2">ich werde versteckt wenn Formular gesendet wird
<form onsubmit="return submitFN()">
<input type="submit">
</form>
</div>
Der Rest ist immer sichtbar

</body>

</html>
...wie erwähnt.
Der onsubmit-Event des Formulars wird überwacht. TRitt er ein, wird das Formular versteckt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück