Ladevorgang
Bernd
- javascript
0 Robert Bamler0 Bernd
0 Martin
Hallo,
Ich habe eine Seite die mit einem Login beginnt.
Am anfang ein einfaches Formular. Die eingetragen Daten werden an eine phpdatei weitergegeben die auf eine DB zugreift und die echtheit prüft.
Wenn falsch wird man zu formular zurückgeleitet.
Wenn die Daten richtig sind dann wird zur startsite weitergeleitet.
Diese datei lädt viele bilder vor , so wie es bei selfhtml im rollover-Anwendungsbeispiel beschrieben ist.
wenn man sich also anmeldet und die Daten sind richtig passiert erst mal gar nicht weil bilder geladen werden. Man sieht das Formularfeld vom Anfang und wartet. Hier möchte ich das eine komplett leere Seite erscheint mit einem Bild wo z.B. ladevorgang draufsteht.
Habe mir gedacht das geht irgendwie mit document.write
Mein Problem:
Ich weiß nicht wie ich das machen soll.
Hat irgendwer nen vorschlag ???
(Habe schon überlegt ob ich das nicht in der php-Datei darstelle, aber da ich mit Header verlinke ist das nicht so einfach)
Hallo Bernd,
Diese datei lädt viele bilder vor , so wie es bei selfhtml im rollover-Anwendungsbeispiel beschrieben ist.
Versuch mal, den Bereich des Skripts, in dem die Image-Objekte initialisiert werden, in eine Funktion zu packen, die du mit <body onload="funktion()"> aufrufst. Dann wird zuerst die Seite vollständig geladen, dann die Bildchen, was ich im übrigen sowieso sinvoller finde. Dann musst du allerdings bedenken, dass beim Rollover die Image-Objekte möglicherweise noch nicht existieren, wenn die Lade-Funktion noch nicht aufgerufen wurde, da die Seite noch nicht zuende geladen wurde. Du darfst hier also nicht die Image-Objekte verwenden, sondern musst direkt die neue Adresse der Bilder angeben.
Ich schreibe mal das Beispielskript in SELFHTML so um, wie ich das oben gemeint habe, dann wirst du es gleich verstehen:
<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
<!--
function bilderLaden()
{
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */
/* Normal-Bilder müssen nicht vorgeladen werden, da diese ja sowieso im HTML-Quelltext adressiert werden. */
}
function Bildwechsel(Bildnr,Bildadresse) {
window.document.images[Bildnr].src = Bildadresse;
}
//-->
</script>
<style type="text/css">
<!--
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
-->
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif" text="#000000" onload="bilderLaden()">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,'button1h.gif')"
onMouseOut="Bildwechsel(0,'button1.gif')"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onMouseOver="Bildwechsel(1,'button2h.gif')"
onMouseOut="Bildwechsel(1,'button2.gif')"><img src="button2.gif"
width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onMouseOver="Bildwechsel(2,'button3h.gif')"
onMouseOut="Bildwechsel(2,'button3.gif')"><img src="button3.gif"
width="130" height="30" border="0" alt="Layouts"></a><br>
</td><td> </td>
<td valign="top">
<h1>Dynamische grafische Buttons</h1>
<p><b>Fahren Sie mit der Maus über die Buttons. Sie dürfen auch draufdrücken ;-)</b></p>
</td>
</tr>
</table>
</body>
</html>
Du kannst natürlich auch die Adressen der Bilder außerhalb der Funktion bilderLaden() in einem Array ablegen:
bildadressen = new Array("button1.gif","button1h.gif","button2.gif","button2h.gif","button3.gif","button3h.gif");
Und dann in der Funktion bilderLaden() schreiben:
bilder = new Array(bildadressen.length);
for (i=0; i<bildadressen.length; i++) {
bilder[i] = new Image();
bilder[i].src = bildadressen[i];
}
Dann kannst du die Funktion Bildwechsel() so umschreiben:
function Bildwechsel(Bildnr,SrcNr) {
window.document.images[Bildnr].src = bildadressen[SrcNr];
}
Und müsstest sie dann so aufrufen:
<a href="../../../index.htm"
onMouseOver="Bildwechsel(0,1)"
onMouseOut="Bildwechsel(0,0)"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onMouseOver="Bildwechsel(1,3)"
onMouseOut="Bildwechsel(1,2)"><img src="button2.gif"
width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onMouseOver="Bildwechsel(2,5)"
onMouseOut="Bildwechsel(2,4)"><img src="button3.gif"
width="130" height="30" border="0" alt="Layouts"></a><br>
Bringt aber - außer dass Änderungen der Dateienamen der Bilder dadurch leichter zu handhaben sind - nicht viel.
Viel Erfolg,
Robert
Hallo danke für die umfangreiche Antwort.
Aber das bilder vorladen und auch rollover funktionieren ja.
Ich will bloß das wärend die bilder vorladen halt ein ladebild zu sehen ist ...also kein balken sondern meinetwegen einfach ne datei wo steht "Seite wird geladen..."
Hallo Bernd,
Aber das bilder vorladen und auch rollover funktionieren ja.
Ja, der Zweck an dem Ganzen ist in meinem Posting wohl untergegangen: Wenn du das Bildervorladen über <body onload="..."> aufrufst, werden die Bilder erst geladen, wenn die Seite fertig geladen wurde (jedenfalls in den meisten Browsern). Die Seite würde also voraussichtlich schneller laden, weil sie nicht durch das Vorladen der Bilder aufgehalten wird. Dann bräuchtest du evtl. gar keine Warte-Meldung. Ist aber nur eine Spekulation
Du kannst aber auch einfach statt der eigentlichen Seite mit den Rollovers eine Seite Laden, die aus Text der Form "Bitte warten..." besteht. Im Head schreibst du dann:
<meta http-equiv="refresh" content="0; URL=seiteMitRollovers.htm" />
<script type="text/javascript">
<!--
location.replace("seiteMitRollovers.htm");
//-->
</script>
Wobei du mit "seiteMitRollovers.htm" auf die Seite verweist, die eigentlich aufgerufen werden soll. Du kannst ja hinter einem Fragezeichen noch CGI-Daten mitversenden.
Viel Erfolg,
Robert
Hallo Bernd,
wie wär's mit einem geringfügig anderen Ansatz?
Am anfang ein einfaches Formular [...]
Wie wäre es, wenn du in dieser Datei, die das Formular enthält, schon die Bilder vorlädst? Dann nutzt du die Zeit sinnvoll aus, die der Anwender braucht, um seine Formulardaten einzugeben, und die Folgeseite kann schnell angezeigt werden, weil die Bilder schon im Browser-Cache sind. Die "Bitte warten"-Meldung erübrigt sich dann eventuell.
Das ist jetzt keine komplette Musterlösung, vielleicht eher ein Denkanstoß...
Gruß aus dem verschneiten Murrtal,
Martin