✔ Ladebalken

@

@flug

Ich habe schon öfters auf verschiedenen Seiten gesehen, dass dort so eine Art Preload ähnlich wie in Flash programmiert ist. Man sieht dann einen Ladebalken und erst wenn der fertig ist, kann man die Seite betreten.

Hier eine Beispielseite:

http://www.flash-labs.com/

Kann mir jemand erkären wie man so etwas programmiert???
 
image preload

Hi einfach,


<script language="JavaScript">

//PUT THE NAMES OF ALL YOUR IMAGES IN THE ARRAY BELOW.
var imagenames=new Array('map1.gif','map2.gif','map3.gif','map4.gif');

var yposition=120; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS

var isNS=(document.layers);
var _all = (isNS) ? 'outer.document.' : 'all.' ;
var _style = (isNS) ? '' : '.style';
var _visible = (isNS) ? 'show' : 'visible' ;
var _hidden = (isNS) ? 'hide' : 'hidden' ;
var blocksize=Math.ceil(250/imagenames.length);
barwidth=imagenames.length*blocksize;
var images=new Array();
var loaded=0, txt='';

function resize(){
if(isNS){
document.outer.moveTo( window.innerWidth/2-barwidth/2 , yposition );
}else{
document.all.outer.style.pixelLeft=document.body.clientWidth/2-barwidth/2;
document.all.outer.style.pixelTop=yposition;
}}

txt+=(isNS)? '<layer name="outer" height="22" bgcolor="lightgrey" top="'+yposition+'" left="'+(window.innerWidth/2-barwidth/2)+'" width="'+barwidth+'" visibility="visible">' : '<div id="outer" style="position:absolute; left:'+(document.body.clientWidth/2-barwidth/2)+'; top:'+yposition+'; height:22px; background-color:lightgrey; width:'+barwidth+'px; visibility:visible;">';
txt+=(isNS)? '<layer z-index="2" width="'+barwidth+'" height="22" ><font point-size="12"><center>Images loading...</center></font></layer>' : '<div style="position:absolute; text-align:center; height:22px; width:'+barwidth+'px; z-index:100; font-size:14px; ">Images loading...</div>';
txt+=(isNS)? '<layer z-index="1" name="prog" height="22" bgcolor="lightseagreen" width="0"></layer>' : '<div id="prog" style="position:absolute; height:22px; background-color:lightseagreen; width:0px"></div>';
txt+=(isNS)? '</layer>' : '</div>';
document.write(txt);

resize();

function dispbars(){
loaded++;
if(isNS){
document.outer.document.prog.clip.width=blocksize*loaded;
}else{
document.all.prog.style.width=blocksize*loaded;
}
if(loaded>=imagenames.length){
setTimeout('(isNS)?document.outer.visibility="hide":document.all.outer.style.visibility="hidden";', 800);
}}

function loadimages(){
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
checkload(n);
}}

function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 500);
}

window.onload=loadimages;
window.onresize=resize;

</script>


einfach in den body...

denke mal das Script ist weitgehend selbsterklärend, aber wenn du hilfe brauchst sag einfach bescheid.
 
Gehört in keinerlei Frameset, sondern in den <body>-Tag deiner Hauptseite, der Aufbau eines eventuellen Framesets ist dem Script egal und daher völlig irrelevant. :)

Denk aber bitte daran, besser folgende Script-Deklarierung zu verwenden:
PHP: 
<script language="JavaScript">
als die von TTrek gepostete, außerdem auch nicht unbedingt vergessen, einen Kommentar um dein eigentliches Script zu setzen...

Geist
 
Hi Leute,
ich weiß, dass der der Beitrag schon alt ist aber ich habe ihn durch die Suchfunktion gefunden :)
Ich möchte auch gerne die Seite vorher laden lassen, damit alles gleichzeitig angezeigt wird aber es funktioniert nicht ganz.
Ich setze den Script in den Body ein aber die Seite lädt sich ganz normal, nur das da jetzt der Balken "images loading" kommt und nicht mehr verschwindet, auch wenn die Seite geladen ist.
Kann mir da jemand weiterhelfen? Es ist sehr wichtig. Danke.

Mfg
 
@nino: Da gehts dir ja mal gut ... ich seh den Balken nämlich gar nicht (!)

OK Hi erstmal, bin neu hier. Hab mir heute auch mal den Code in meine Seite eingebaut und er funktioniert natürlich nicht. Hab oben bei dem newArray alle meine Bildernamen eingefügt und bekomme vom Browser einen Fehler in Zeile 33, bei der er ein Objekt erwartet. Zeile 33 beginnt mit folgendem Code:
txt+=(isNS)? '<layer name="outer" height="22" bgcolor="lightgrey" top="'+yposition+'" left="'+(window.innerWidth/2-barwidth/2)+'" width="'+barwidth+'" visibility="visible">' : ... etc.
Zum Vergrößern anklicken....
OK ich weiss nich mehr, was ich machen soll. Normalerweise würde ich das mit meinen DIVs machen und den onLoad Events bei den Verhalten, aber das funktioniert leider nur zum Teil, weil manche Ebenen doch vorher schon eingeblendet werden, obwohl sie noch gar nicht dürfen.

Hier mal die Seite, damit sich das jeder mal reinziehen kann:
http://www.subbz2k.com/pages/kontakt1.html

Ist eine Testseite, aber da kann man auch den Fehler nachvollziehen und sehen, dass ich gar keinen Ladebalken bekomme, sondern die Seite ganz normal geladen wird ... nur halt mit dem Fehler unten.

Hoffe, dass mir jemand helfen kann.

PS: Das mit der durchgängigen Kleinschreibung solltet ihr nochmal überdenken. Ich bin hier schliesslich nicht bei einem Vortrag für eine Versicherungsagentur. Und wenn es um die Chatsprache geht: OK, dann wäre es angebracht, wenn ihr auch die Smilies rausnehmt, denn das gehört ja bekanntlich ebenfalls zur Chatsprache!
 
OK, also ich habe mich heute die ganze Nacht hingesetzt (ich sitze immer noch :) ) und habe mir was zum Thema Ladebalken und DIV-Layer einfallen lassen. Und mir ist etwas eingefallen. Alles mal wieder mit den guten alten Tools aus dem Gott unter den Editoren Dreamweaver entstanden ;) Schaut´s euch mal an auf meiner Homepage. Ich bin zwar jetzt in dem Moment noch längst nicht mit allen Seiten fertig - wenn ihr meinen Thread lest, bin ich es aber vielleicht schon.

Meine Homepage: http://www.subbz2k.com

So und nun zu denen, die´s evtl. interessiert: Der Trick ist gar kein Trick, sondern eher ein geschickter Umgang mit den Ebenen (Layer) und deren Verhalten. So, wie ich das bei meiner Homepage bereits bei den Navigationsbuttons gemacht habe (die meisten nehmen dafür gern Java-Rollover - die sind aber zu unflexibel in der Hinsicht), habe ich es nun für den Preloader gemacht.

Als erstes habe ich ein Bild erstellt, was auf der obersten Ladeinstanz steht (also vor allen anderen DIV-Layern). Dieses Bild hat ein Verhalten bekommen (mit einem onLoad Event), der sämtliche folgenden Layer ausblendet (also invisible macht). Als nächstes habe ich auf der letzten Ladeinstanz (also nach allen Layern) ein weiteres Bild erstellt, was eine zuvor über Javascripte definierte Zeitleiste startet (das macht der DW ganz allein - da braucht man nix weiter tun). Diese Zeitleiste ist so konfiguriert, dass sie dieses zweite Bild ein Stück stehen lässt, damit man das "Fertig!" nach dem Laden lesen kann. Anschließend startet sie ein Verhalten, was sämtliche von mir definierte Ebenen (die in dem Moment dann definitiv fertig geladen sind) wieder einblendet und die Ebenen der beiden Preloader-Bilder ausblendet.

Also ein einfaches Prinzip, was auch einfach funktioniert :) Die ganze Sache hat aber leider zwei Haken: Zum Einen bekommt man so nicht wirklich einen Preloader hin, der eine Statusanzeige bieten kann und zum Anderen wird das in manchen Browsern (wie z.B. Netscape oder Opera) vermutlich nicht darstellbar sein. Getestet habe ich es nicht, aber wer möchte, kann mir gern schreiben, ob es dort funktioniert, oder nicht.

Soviel dazu, also für meine Zwecke sei mir damit geholfen. Wenn das noch jemanden interessiert der ebenfalls den Dreamweaver verwendet und dazu noch Fragen hat, dann kann er mir die gern stellen. Schaut auf meine Homepage unter Kontakt und da stehen alle Möglichkeiten drin ;)

Mfg
subbz2k
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück