• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fortschritsbalken während Bilder laden

MasteR ChieF

MasteR ChieF

Mitglied
Hallo Community...


Ich habe mir in PHP eine Bildergalerie zusammengebastelt. Funktioniert alles auch tip top, so wie es sollte.

Mein Wunsch (bzw. auf reklamationen der Benutzer) ist es nun, während meine Vorschaubilder geladen werden eine kleine Vortschritsanzeige anzuzeigen, anstatt das der Benutzer sieht, wie das Bild geladen wird.

Ist das mit PHP möglich? oder brauch ich dazu Javascript?
wenn ja.. wie funktioniert das? =)


Hoffe ihr könnt mir helfen

mfg
Master Chief
 
Das währe eher JavaScript, da PHP ja nicht weis, wie/ob das Bild gerade geladen wird.*

Die einfachste Methode währe wohl ein animiertes Gif (Dieser "Balken in Kreis dreht") als Hintergrundbild des <img-Tag's.

Ansonnsten sagt Google viel, wenn man "JavaScript Ladebalken Bilder" eingibt.

)* = Unter gewissen Umständen währe es möglich. Jedoch währe hier eher JS angebracht.
Mfg

Edit sagt: Gibt sogar ein Animiertes-Gif-Bild-Generator: http://www.ajaxload.info/
Edit2: http://www.html.de/html-und-xhtml/27506-ladebalken-fuer-bilder.html | http://forum.fachinformatiker.de/skript-webserverprogrammierung/13307-ladebalken-javascript.html
 
Zuletzt bearbeitet:
Ein Fortschrittsbalken geht nicht. Nur so eine Animation während des Ladevorgangs anzeigen und danach dann das Bild anzeigen. Bilder haben einen onload Event, damit läßt sich dies exakt (in JS) umsetzen.
 
hallo, danke für eure Hilfe
das mit dem Hintergrundbild finde ich eine gute idee...

mein problem ist nur noch.

Ich habe rechts ein Kasten wo ich 9 Vorschaubilder anzeigen lasse.

Nun will ich im kasten nur dieses animierte GIF anzeigen und erste wenn alle 9 Bilder fertig sind, diese anzeigen


könnt ihr mir helfen??

danke
 
Habe durch ein bisschen googeln eine akzeptable lösung gefunden


HTML: 
<html>
<head>
<meta http-equiv="refresh"
content="30;url=animation.html" />
<!-- nach 30 Sekunden wird die Seite animation.html geladen -->
<title>Animation vorbereiten</title>
<script type="text/javascript"><!--
var geladen = 0;  //Anzahl der fertig geladenen Grafiken
function fertig() {
   geladen++;
   if (geladen==4) { //wenn alle Grafiken geladen sind
      location.href = "animation.html";
   }
}
//--></script>
</head>
<body>
<h3>Animation lädt... Bitte warten...</33>
<img src="ani1.jpg" onload="fertig();" width="1" height="1" />
<img src="ani2.jpg" onload="fertig();" width="1" height="1" />
<img src="ani3.jpg" onload="fertig();" width="1" height="1" />
<img src="ani4.jpg" onload="fertig();" width="1" height="1" />
</body>
</html>
 
Kann man so machen, aber wenn es nur um ein Vorladeseite geht, kannst du auch onload des Dokument verwenden.

Code: 
window.onload = function() {
      window.location.href = "animation.html";

}
ausserdem würde ich noch einen Link für Leute ohne JS reinmachen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben