Gegen Bilderklau - Das Original

Registrierung Mitgliederliste Teammitglieder Suche Häufig gestellte Fragen Statistik Chat Karte Zur Startseite

Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Tutorials und FAQ » [JS] Preload » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Preload
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
reikema reikema ist weiblich
www.design-foto.net


images/avatars/avatar-49250.png

Dabei seit: 15.07.2005
Beiträge: 7.964
Herkunft: 14089 Berlin

Preload Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Preload


Hiermit möchte ich euch zeigen wie ihr eure Bilder auf euer Seite vorladen könnt, damit ewiges Laden vorbei ist!
Legt euch eine Seite namens Index.html/php/htm an und kopiert aus der Seite folgendes Script hinein:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
<script language="JavaScript">
                                         var imagenames=new Array( 
                                         'http://url-zum-bild.gif',                     // ERSETZE DIE LINKS DURCH DEINE URLS ZU DEINE BILDER, DIE VORGELADEN WERDEN SOLLEN
                                         'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif',
										 'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif',
                                         'http://url-zum-bild.gif');

                                         var yposition=80;                          // DAS IST DER ABSTAND DER VORLADELEISTE VOM OBEREN BILDSCHIRMRAND IN PIXELN GRECHNET
                                         var loadedcolor= '#000000';                // FARBE DER GELADEN DINGE
                                         var unloadedcolor='#FFFFFF';               // FARBE DER UNGELADEN DINGE
                                         var barheight=10;                          // HÖHE DES VORLADEBALKENS
                                         var barwidth=300;                          // BREITE DES VORLADEBALKENS
                                         var bordercolor='#000000';                     // RAHMENFARBE DES VORLADENBALKENS
                                         var load_afterwards="http://www.url-zur-seite.de";                     // ADRESSE ZUR INDEX SEITE
                                         var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
                                         var IE4 = (document.all)? true : false;
                                         var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
                                         var imagesdone=false;
                                         var blocksize=barwidth/(imagenames.length);
                                         barheight=Math.max(barheight,25);
                                         var loaded=0, perouter, perdone, images=new Array();
                                         var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
                                         txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
                                         if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
                                         txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'">Preload images...</font></center></td></tr?????></table>';
                                         if(NS4) txt+='</layer>';
                                         txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
                                         txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'">Preload images...</font></center></td></tr></table>';
                                         txt+=(NS4)? '</layer></ilayer>' : '</div>';
                                         txt+='</td></tr></table>';
                                         txt+=(NS4)?'</layer>' : '</div>';
                                         document.write(txt);
                                         function loadimages(){
                                         if(NS4){
                                         perouter=document.perouter;
                                         perdone=document.perouter.document.layers[0].document.perdone;
                                         }
                                         if(NS6){
                                         perouter=document.getElementById('perouter');
                                         perdone=document.getElementById('perdone');
                                         }
                                         if(IE4){
                                         perouter=document.all.perouter;
                                         perdone=document.all.perdone;
                                         }
                                         cliplayer(perdone,0,0,barheight,0);
                                         window.onresize=setouterpos;
                                         setouterpos();
                                         for(n=0;n<imagenames.length;n++){
                                         images[n]=new Image();
                                         images[n].src=imagenames[n];
                                         setTimeout('checkload('+n+')' ,n*100);
                                         }}
                                         function setouterpos(){
                                         var ww=(IE4)? document.body.clientWidth : window.innerWidth;
                                         var x=(ww-barwidth)/2;
                                         if(NS4){
                                         perouter.moveTo(x,yposition);
                                         perouter.visibility="show";
                                         }
                                         if(IE4||NS6){
                                         perouter.style.left=x+'px';
                                         perouter.style.top=yposition+'px';
                                         perouter.style.visibility="visible";
                                         }}
                                         function dispbars(){
                                         loaded++;
                                         cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
                                         if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
                                         }
                                         function checkload(index){
                                         (images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
                                         }
                                         function hideperouter(){
                                         (NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
                                         document.location=load_afterwards;
                                         imagesdone=true;
                                         }
                                         function cliplayer(layer, ct, cr, cb, cl){
                                         if(NS4){
                                         layer.clip.left=cl;
                                         layer.clip.top=ct;
                                         layer.clip.right=cr;
                                         layer.clip.bottom=cb;
                                         }
                                         if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
                                         }
                                         window.onload=loadimages;
                                         </script>



Gebt dort eure URLs zu den Bildern an die vorgeladen werden sollen und bearbeitet alles weitere wo // steht! Dort ist euch auch beschrieben was ihr genau machen müsst! Wenn ihr mehr Bilder einfügen wollt, dann fügt einfach zwischen die Teile ein:

code:
1:
'http://url-zum-bild.gif');



Die Seite könnt ihr jetzt noch nach euren Belieben verschönern.


__________________

01.08.2006 08:31 reikema ist offline Homepage von reikema Beiträge von reikema suchen Nehmen Sie reikema in Ihre Freundesliste auf Fügen Sie reikema in Ihre Kontaktliste ein
sara1991 sara1991 ist weiblich
Summerchild


images/avatars/avatar-38493.jpg

Dabei seit: 26.05.2005
Beiträge: 4.549
Herkunft: Bern

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Super Tutorial.
Doch ich habe noch ein paar Fragen:
kann man den Code auch in die Enter Seite 'tun'?
code:
1:
var load_afterwards="http://cleene.cl.funpic.de/Privatseite/index2.htm";                     // ADRESSE ZUR INDEX SEITE


Welche Adresse muss man da genau Angeben? Also die mit dem Design, oder?
Wie kann man dann auf die Seite kommen, wenn es geladen hat. Wird man automatisch weitergeleitet?

Bei mir kommt nämlich kein Balken.
Hier

Wäre nett wenn du mir helfen könntest!

LG,
Sara
10.08.2006 16:42 sara1991 ist offline Homepage von sara1991 Beiträge von sara1991 suchen Nehmen Sie sara1991 in Ihre Freundesliste auf Fügen Sie sara1991 in Ihre Kontaktliste ein MSN Passport-Profil von sara1991 anzeigen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Tutorials und FAQ » [JS] Preload

Impressum

Forensoftware: Burning Board, entwickelt von WoltLab GmbH