Preloader: Objekt-Fehler?

D

Dommas

Erfahrenes Mitglied
Hallo Zusammen

Ich habe einen Preloader gefunden, der eigentlich ganz gut funktionieren würde. Leider wird er jedoch mit Blockelementen (DIV) unschön angezeigt, und zwar mit absolut-Angaben. Ich wollte den DIV-Elementen relative Angaben zuweisen und sie mit dem "z-index" von CSS schön übereinander lagern. Seit ich das getan habe, funktioniert der Prozentbalken nicht mehr und im Browser wird eine JavaScript-Fehlermeldung ausgegeben: Objekt erforderlich. Und zwar in Zeile 59, Zeichen 2. Hier mal der Code:

Code: 
<html>
<head>

<script>

///////////////////////////////////////////////
// PUT ALL IMAGES IN AN ARRAY FOR PRELOADING //
///////////////////////////////////////////////
var pics = new Array("images/nav/anmeldung1.gif", "images/nav/anmeldung2.gif", "images/nav/dokumente1.gif", "images/nav/dokumente2.gif", "images/nav/events1.gif" ,"images/nav/events2.gif", "images/nav/home1.gif", "images/nav/home2.gif", "images/nav/kontakt1.gif", "images/nav/kontakt2.gif", "images/nav/links1.gif", "images/nav/links2.gif", "images/nav/training1.gif", "images/nav/training2.gif", "images/nav/vorstand1.gif", "images/nav/vorstand2.gif");

///////////////////////////////////////////////////
// ENTER URL TO GOTO AFTER IT FINSHES PRELOADING //
///////////////////////////////////////////////////
var url = "index2.php";

////////////////////////////////////////////////////
// ASK USERS TO GO TO NEXT PAGE AFTER PRELOADING? //
//////////////////////////////////////////////////// 
var doConfirm = true;

////////////////////////////////////
// ALLOW USER TO SKIP PRELOADING? //
////////////////////////////////////
var canSkip = false;


////////////////////////////////////////////////////////////////////////////////////
//------------YOU ARE DONE, DON'T EDIT ANYTHING BEYOND THIS POINT-----------------//
////////////////////////////////////////////////////////////////////////////////////


var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;


function getLayer(layerID) {
if (document.getElementById)
	return document.getElementById(layerID);
else if (document.all)
	return document.all[layerID];
else 
	return null;
}


function updateBar() {
statLayer.innerHTML = "<font face=\"Verdana\" color=\"#000000\"><B>" +loaded+ "/" +total+ "</B></font>";
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
	{
	cPercent = percent;
	barLayer.style.width = (cPercent*3) +"px";
	percentLayer.innerHTML = "<font face=\"Verdana\" color=\"#000000\"><B>" +cPercent+ "%</B></font>";
	}
if (loaded == total)
	{
	doneMsgLayer.innerHTML = "<a href=\"javascript:done()\">";
	if (!doConfirm || (doConfirm && confirm("Files have finished loading, continue to next page?")))
		done();
	}
}




function startLoading() {
if (document.getElementById || document.all)
	{
	barLayer = getLayer("bar");
	percentLayer = getLayer("percent");
	statLayer = getLayer("stat");
	doneMsgLayer = getLayer("doneMsg");
	if (canSkip)
		doneMsgLayer.innerHTML = "<a href=\"javascript:done()\"><font color=\"#FFCC00\" size=\"2\" face=\"Arial\">Skip Pre-Loading</font></a>";
	for (i=0; i<pics.length; i++)
		{
		imgObjs[i] = new Image();
		imgObjs[i].onload = imgLoaded;
		imgObjs[i].onerror = imgFailed;
		imgObjs[i].src = pics[i];
		}
	}
else
	{
	alert("You are likely running very old browser which is not compatible with preloading script.  Maybe it is time to update your browser.\n\nProgram is skipping preloading.");
	window.location.replace(url);
	}
}




function done() {
window.location.replace(url);
}



function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this.  The program will skip this file now.");
loaded++;
updateBar();
}

function imgLoaded() {
loaded++;
updateBar();
}



</script>
</head>

<body bgcolor="#506080" onLoad="startLoading()">

<div id="bg" align="center" style="position:relative; top:19px; z-index:2; background-color: #DDDDDD; width:300px; height:20px;>&nbsp;</div>
<div id="bar" align="center" style="position:relative; z-index:4; background-color:#ff9900; width:1px; height:20px;">&nbsp;</div>
<div id="percent" style="position:relative; z-index:3;" align="center"><font face="Verdana" color="#000000"><B>0%</B></font></div>
<div id="doneMsg" style="position:relative; top:250px; left:720px;"></div>


<div id="doneMatter" align="center" style="position:relative; z-index:1; top:10px; width:700px;">
<center><font color="#FFFFFF" face="Verdana" size="2">Lade Bilder...</font></center><BR>
</div>
<div id="stat" align="center" position:relative;><center><font face="Verdana" color="#FFFFFF" size="2"><B>0/0</B></font>
</center></div>

</body>
</html>

Was habe ich falsch gemacht? Zeile 59 ist übrigens diese hier:

Code: 
barLayer.style.width = (cPercent*3) +"px";
Es muss natürlich etwas mit der relativen Positionierung zu tun haben, aber da ich in JS nicht wirklich super bin habe ich keine AHnung was ich dort verändern muss damit alles funktioniert.

Danke für eure Hilfe!
 
Du hast im <div> "bg" nach in der style-Definition das schliessende Anführungszeichen vergessen, deswegen findet er "bar" nicht, folglich bleibt "barLayer"==null.
 
Ah, danke, das habe ich übersehen ;)
Das war jedoch nicht der einzige Grund... Die Reihenfolge der Layers stimmte auch nicht und auch nach der Korrektur wurde der Fortschrittsbalken nicht angezeigt - nun hat es aber geklappt nachdem alles korrigiert ist.

Danke und Gruss aus der Schweiz
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück