[JS] Preload | Gegen Bilderklau

reikema

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.