Preloader für seite

NoNo

hi leute habe ne seite mit tabellen und so erstellt und da ich es scheisse finde das man sieht wie sich die einzelnen bilder aufbauen habe ich mir gedacht kann mir vielleicht einer/ oder eine erklären wie ich nen preloader einbaue =)

danke

Ivanman

Folgenden Code speicherst du einfach in die Datei "preload.js"!

Code

var locationAfterPreload = "/HTML Dateien/Bilder.html"
var lengthOfPreloadBar = 150
var heightOfPreloadBar = 10
var yourImages = new Array(
"images/image_01.gif",
"images/image_box_02.gif",
"images/image_box_03.gif",
"images/image_box_04.gif")


if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "images/preload_1.gif"
dots[1] = new Image(1,1)
dots[1].src = "images/preload_2.gif"
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}

Alles anzeigen

Modifikationen des Preloaders:

- var locationAfterPreload = "": Hier die Seite angeben auf die der Preloader nach Beendung des Ladevorgangs weiterleiten soll.

- var lengthOfPreloadBar = 150: Die Länge des Lade-Balkens in Pixel.

- var heightOfPreloadBar = 10: Die Höhe des Lade-Balkens in Pixel.

- var yourImages = new Array(): Innerhalb der klammern werden untereinander die einzelnen Bilder, die vorausgeladen werden sollen, eingetragen.

- dots[0].src = "images/preload_1.gif": Hier wird der Ladebalken-Hintergrund des Preloaders definiert, dazu benötigt man ein 1x1 Pixel großes Gif, welches mit der gewünschten Farbe gefüllt ist. Dieses Bild am besten in dein Image-Verzeichnis ablegen und den Pfad hier entsprechend angeben.

- dots[1].src = "images/preload_2.gif": Hier wird der Ladebalken-Vordergrund, also der Balken, der später den Ladefortschritt des Preloaders anzeigt, definiert, dazu benötigt man ein 1x1 Pixel großes Gif, welches mit der gewünschten Farbe gefüllt ist. Dieses ebenfalls in dein Image-Verzeichnis ablegen und den Pfad hier entsprechend angeben.

Nun eine HTML Datei namens "preload.html" erstellen und folgenden Code eingeben:

HTML

<html>
<head>
<script language="JavaScript" src="preload.js" type="text/javascript"></script>
</head>
<body>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="75" align="center" bgcolor="#FFFFFF">
<center>
preloading images, please wait...




<font color="#000000">0%</font>
<script language="JavaScript1.1">
<!--
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '[img]' + dots[0].src + '[/img]'
}
preloadBar += '[img]' + dots[0].src + '[/img]'
document.write(preloadBar)
loadImages()
}
document.write('<font color="#000000"> 100%</font>


[url='javascript:window.location=locationAfterPreload']skip preloading [/url]')
//-->
</script>
</center>
</td>
</tr>
</table>
</body>

Alles anzeigen

Die HTML Datei kannst du natürlich nach deinen Wünschen umgestalten!

Mastershit

HTML

<?
$ordner = "images"; // hier din bilderordner mit den bildern die vorgeladen werden sollen
$handle = opendir($ordner);
while ($file = readdir ($handle)) {
    if($file != "." && $file != ".." && $file != "thumbs.db") {
            $assi .= "'$ordner/$file' ";
			$assi3 = chop($assi);
			$assi4 = str_replace(" ", ", ", $assi3);
    }
}
closedir($handle);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>preloading Images...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?
$assi2 = '
<script language="JavaScript1.2">
<!-- begin hiding


startingColor = new Array() // <-- Do not modify!
endingColor = new Array() // <-- Do not modify!


// YOU MAY MODIFY THE FOLLOWING:
var yourImages = new Array('.$assi4.') // Fill this array with the images you wish to preload
var locationAfterPreload = "index1.htm" // The script will redirect here when the preloading finishes *successfully*
var preloadbarWidth = 450 // The length of the preload bar. Should be greater than total amount of images you want to preload!
var preloadbarHeight = 10 // The height of the gradient/preload bar
var backgroundOfGradient = "#DDDDDD" // Default color while the preload bar is "filling up"


// Color the preloadbar is starting with - enter 1st, 3rd and 5th numbers/letters of color code
startingColor[0] = "A" 
startingColor[1] = "3"
startingColor[2] = "3"


// Color the preloadbar is going to end up with - enter the 1st, 3rd and 5th numbers/letters of color code
endingColor[0] = "5"
endingColor[1] = "A"
endingColor[2] = "3"


// FOR TROUBLESHOOTING:
var gap = 8 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT ERROR!!! 2 is the minumum value!!!




// DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!


if (!document.all) location.replace(locationAfterPreload)
var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();
var convert = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), imgLen = yourImages.length;
var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();
var num = Math.floor(preloadbarWidth/gap);
for (i = 0; i < 3; i++) {
	startingColor[i] = startingColor[i].toLowerCase();
	endingColor[i] = endingColor[i].toLowerCase();
	startingColor[i] = eval(startingColor[i]);
	endingColor[i] = eval(endingColor[i]);
	diff[i] = (endingColor[i]-startingColor[i])/num;
	ones[i] = Math.floor(diff[i]);
	sixteens[i] = Math.round((diff[i] - ones[i])*15);
}
endingColor[0] = 0;
endingColor[1] = 0;
endingColor[2] = 0;
i = 0, j = 0;
while (i <= num) {
	hilite[i] = "#";
	while (j < 3) {
		hilite[i] += convert[startingColor[j]];
		hilite[i] += convert[endingColor[j]];
		startingColor[j] += ones[j];
		endingColor[j] += sixteens[j];
		if (endingColor[j] > 15) {
			endingColor[j] -= 15;
			startingColor[j]++;
		}
		j++;
	}
	j = 0;
	i++;
}
function loadImages() {
	for (i = 0; i < imgLen; i++) {
		preImages[i] = new Image();
		preImages[i].src = yourImages[i];
		loaded[i] = 0;
		cover[i] = Math.floor(num/imgLen)*(i+1)
	}
	cover[cover.length-1] += num%imgLen
	checkLoad();
}
function checkLoad() {
	if (pending) { changeto(); return }
	if (currCount == imgLen) { location.replace(locationAfterPreload); return }
	for (i = 0; i < imgLen; i++) {
		if (!loaded[i] && preImages[i].complete) {
			loaded[i] = 1; pending++; currCount++;
			checkLoad();
			return;
		}
	}
	setTimeout("checkLoad()",10);
}
function changeto() {
	if (h+1 > cover[currCount-1]) {
		var percent = Math.round(100/imgLen)*currCount;
		if (percent > 100) while (percent != 100) percent--;
		if (currCount == imgLen && percent < 100) percent = 100;
		defaultStatus = "Lädt Bild " + currCount + " von " + imgLen + " Bildern [" + percent + "%].";
		pending--;
		checkLoad();
		return;
	}
	eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;
	h++;
	setTimeout("changeto()",1);
}
defaultStatus = "Lädt Bild 0 von " + imgLen + " Bildern [0%]."
// end hiding -->
</script>';


echo $assi2;
?>
</head>
<body bgcolor="#EEEEEE">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<font face="Verdana, Arial, Helvetica" size="2" color="#000000">[b]<center>Bilder vorladen ...</center>[/b]




<script language="JavaScript1.2">
<!-- beging hiding
document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');
for (i = 0; i < num; i++) {
	document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');
}
document.write('</tr></table>');
document.write('


[size=8][url='javascript:location.replace(locationAfterPreload)']<small>Vorladen überspringen[/size][/url]</small></p></font>')
loadImages();
// end hiding -->
</script>
</td>
</tr>
</table>


</body>
</html>

Alles anzeigen

Tags