JavaScripts -> Bilder -> Bild-Preloader mit Statusanzeige

Dies ist ein fortgeschrittener Preloader mit edel aussehender Statusanzeige. Es können beliebig viele Bilder verwaltet werden, das Script ist weit konfigurierbar von der farblichen Gestaltung etc. Das Script wird einfach in den Body-Bereich Ihrer Startseite eingebaut, und die Dateinamen und -größen der Bilder Ihrer Hauptseite werden in das Script geschrieben. Um den Transparenzeffekt zu sehen (übrigens in allen Browsern!) brauchen Sie zusätzlich eine der Dateien aus dem Paket transparent_png, welches Sie im Download-Bereich finden.

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--
//Stylish Preloader v1.0 (c) 2003 Triple-M / http://www.htmlarsenal.de

//Benutzung: Einfach das Script in den Body-Bereich kopieren, Bildernamen und -größen anpassen, fertig.
//Usage: Just copy the script in the body area, adapt image names and sizes, ready.

//WICHTIGE GRUNDEINSTELLUNGEN / important basic settings

//Pfade der Bilddateien / paths of the image files
var picnames=new Array("image1.gif","image2.jpg","/path/to/image3.gif");

//Dateigrößen der Bilddateien in KB / file sizes of the image files in kb
var picsizes=new Array(244,423,111);

var targetpage="main.html"; //Page zu der weitergeleitet werden soll / Page the user should be redirected to

//WEITERE EINSTELLUNGEN / miscellanous settings

var picpath=""; //Pfad zu den Status-Bildern / Path to the status images
var picoverlay="black50.png"; //Übergelegtes Bild / Overlayed Image
var picbg="preloaderbg.gif"; //Hintergrundbild / Background Image

var progw=100; //Breite des Balkens / Width of bar
var progh=8; //Höhe des Balkens / Height of bar

var fontcol="#000000"; //Textfarbe / text color

var preloadmessage="Die Seite wird vorgeladen... "; //Nachricht / message
var completemessage="Sie werden weitergeleitet..."; //Nachricht zur Weiterleitung / message for redirection
var skip="&Uuml;berspringen"; //Überspringen-Link / link "skip"


//AB HIER BITTE NICHTS MEHR VERÄNDERN / PLEASE DO NOT CHANGE ANYTHING FROM HERE ON

var preloadimages=new Array();
var csize;

function percent(w) {
document.progress.width=Math.floor(((100-parseInt(w))*progw)/100)
document.getElementById("percentage").firstChild.nodeValue="("+parseInt(w)+"%)";
}

function complete() {
document.getElementById("percentage").firstChild.nodeValue="";
document.getElementById("message").firstChild.nodeValue=completemessage;
}

function pchk() {
var asize=0,remaining=0;
for(i=0;i<preloadimages.length;i++) {
if(preloadimages[i].complete) asize+=picsizes[i];
else remaining++;
}
percent((asize*100)/csize);
if(remaining==0) {
complete();
location.href=targetpage;
} else {
window.setTimeout("pchk()",100);
}
}

function preloader() {
document.write('<div style="text-align:center; font-family:Verdana,sans-serif; font-size:10px; color:'+fontcol+'"><span id="message">'+preloadmessage+'</span><span id="percentage">(0%)</span><div style="height:'+progh+'px; width:'+progw+'px; background-image:url('+picpath+picbg+'); padding:0px; margin:0px; border:none; text-align:right; margin:auto; margin-top:2px; margin-bottom:2px"><img name="progress" id="progress" src="'+picpath+picoverlay+'" width="'+progw+'" height="'+progh+'" alt="" style="filter:Alpha(opacity=50)"></div><a href="'+targetpage+'" onClick="complete()" style="color:'+fontcol+'">'+skip+'</a></div>');
csize=0;
for(i=0;i<picnames.length;i++) {
preloadimages[i]=new Image();
preloadimages[i].src=picnames[i];
csize+=picsizes[i];
}

window.setTimeout("pchk()",100);

}

//Den Preloader ausführen / Execute the preloader

preloader(); //Alternativ: im Body-Tag onLoad="preloader()" / alternative: onLoad="preloader()" in the body tag

//-->
</script>