Gegen Bilderklau - Das Original (https://www.gegen-bilderklau.net/index.php)
- Design, Website, Copyright (https://www.gegen-bilderklau.net/board.php?boardid=80)
--- Homepagehilfe (https://www.gegen-bilderklau.net/board.php?boardid=27)
---- Tutorials und FAQ (https://www.gegen-bilderklau.net/board.php?boardid=45)
----- [JS] Preload (https://www.gegen-bilderklau.net/thread.php?threadid=74637)


Geschrieben von reikema am 01.08.2006 um 08:31:

  Preload

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.



Geschrieben von sara1991 am 10.08.2006 um 16:42:

 

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


Forensoftware: Burning Board, entwickelt von WoltLab GmbH