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

simpler Preloader..?

Status
Für weitere Antworten geschlossen.
S

schrepfer

Neues Mitglied
Hallo zusammen,
Ich weiss, das Thema Preloader wurde schon mehrmals angesprochen in diesem Forum, jedoch fand ich die Lösung zu meinem Problem nicht wirklich. Ich hoffe ihr nehmt euch trotzdem kurz Zeit für mich. Mein Anliegen: Ich würde gerne meine Bilder vorladen (vermutlich in 1x1 Pixel Bildern) und in dem Moment indem die Bilder (bzw. die Seite) vollständig geladen ist einen direkten redirect auf die nächste Seite legen. So weit so gut ist beides eigentlich kein Problem, der Redirect sowie die Bilder laden zu lassen, doch wie kriege ich den redirect dazu, dass er genau zu dem Zeitpunkt, wenn die Seite fertig geladen ist, eine neue Seite aufruft?
So kompliziert wie das nun zu tönen vermag, eigentlich ist die Sachlage einfach: Ein automatischer redirect nach vollständiger Ladung der Page.

Mit freundlichen Grüssen
schrepfer

EDIT: Die Lösung kann in HTML, PHP oder JavaScript realisiert werden. Am liebsten PHP oder HTML..
 
Mit AJAX ist das ganze relativ simpel.
Du erstellst dir eine PHP-Seite, die deinen Order mit den Bildern durchsucht und alle Dateien in IMG-Tags setzt.
Diese Datei lädst du dann über JavaScript mit einem AJAX-Handler, und wartest auf den Status 200. Wenn dieser da ist, sind alle Bilder geladen, und du kannst den Redirekt ausführen.

Das wäre der Weg, den ich gehen würde.
Leider habe ich derzeit kein Codeschnipsel dafür, aber man lernt eh am besten beim selbermachen ;)
 
Sicherlich ein sehr guter Weg.
Doch das ist wohl kaum ein simpler Weg, vorallem wenn man sich mit AJAX noch nicht auskennt, kommt einem der Ajax Handler bestimmt spanisch vor.

Ein relativ simples Script könnte dagegen so aussehen
HTML: 
<html>
<head>
<title>preloader</title>
<script>
url = "index.php?id=1";  //Ziel des Redirectes wenn Bilder geladen sind
progress= new Array("images/header.gif  //hier die Bilder eintragen
                    "images/bg.gif",
                    "images/Bilder/border_03.gif",
                    "images/Bilder/border_04.gif",
                    "images/Bilder/border_05.gif",
                    "images/Bilder/border_07.gif",
                    "images/Bilder/border_09.gif",
                    "images/Bilder/border_10.gif",
                    "images/Bilder/border_11.gif",
                    "images/Bilder/border_12.gif");
var x;

function preload()
{
	p	= new Array();
	x	= 0;

 	for(i=0;i<progress.length;i++)
	{
		p[i]		= new Image();
		p[i].onabort 	= update;
		p[i].onerror 	= update;
		p[i].onload  	= update;
		p[i].src	= progress[i];
	}
}
function update()
{
	x++;
	pro=Math.floor((x/progress.length)*100);

	(document.all) ?
	dom=document.all["loadausgabe"] :
	dom=document.getElementById("loadausgabe");

	dom.innerHTML= x+" von "+progress.length+" Bildern geladen.<br>"+pro+" %";

	if(pro==100) location.href=url;
}
</script>
</head>

<body onload="preload()" bgcolor="#333333">
<table width=100% height=100% align=center>
	<td align=center>
		<table align=center width=210 height=20>
		<tr>
			<td align=left width=210 valign=top height=20>

				<div id="loadausgabe" style="font:10px verdana;color:ffffff">0 von 10 Bildern geladen.<br>0 %</div>
			</td>
		</tr>
                 <tr>
			<td align=left width=210 valign=top height=20>
				<div id="loadausgabe2" style="font:10px verdana;color:ffffff">Sollte die automatische Weiterleitung nicht funktionieren, klicken Sie bitte <a href="index.php?id=1">hier</a></div>

			</td>
		</tr>
		</table>
	</td>
</table>
</body>
</html>

Das Script ist keine Eigenentwicklung. Ich habe es mal auf einer Website gefunden und meinen Ansprüchen angepasst.
 
Danke Frank!
Dies war genau der benötigte Script, obwohl ich zugeben muss, von AJAX noch nicht wirklich viel gehört habe und darunter eher ein Fussballverein verstehe als eine Script-Sprache :-D
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben