Ladebalken

[Mannix]

Hallo,

ich möchte auf einer Seite eine größere Grafik laden.
Damit der Besucher weiß, das etwas passiert, möchte ich einen Ladebalken einbauen.
Allerdings soll der Rest der Seite (Text und Schaltergrafiken) von Anfang an angezeigt werden.
Kann mir jemand helfen?

 

[dkdenz]

Interne Suche: Preloader!

 

[Mannix]

Ok, ich habe was gefunden.
Aus meiner Datei "kontakt.html" wurde "kontakt-vor.html", und die Grafik wurde hier entfernt.
Mit dem Code:

<td colspan="9" valign="top" align="center">
	<center>
		Grafik wird geladen, bitte warten...<br><br>
		<font color="#000000">0%</font>
		<script language="JavaScript1.1">
		<!--
		if (document.images) {
		var preloadBar = ''
		for (i = 0; i < yourImages.length-1; i++) {
		preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
		}
		preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
		document.write(preloadBar)
		loadImages()
		}
		document.write('<font color="#000000"> 100%</font><br><br><a href="javascript:window.location=locationAfterPreload">  </a>')
		//-->
		</script>
	</center>
</td>

an der Stelle der Grafik in kontakt-vor.html wird die Grafik geladen, und nach Abschluß des Ladevorgangs wird die endgültige Seite kontakt.html automatisch geladen.
Dazu gehört noch die Datei "preloader.js"

var locationAfterPreload = "kontakt.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)
}

Die durch

<script language="JavaScript" src="preloader.js" type="text/javascript"></script>

im Header eingebunden wird.