Per JS dem body ein onload Event hinzufügen

Zenti

Erfahrenes Mitglied
Guten Tag liebe Community,

hätte da mal eine Frage ^^
Es ist doch bestimmt möglich dem <body> Tag per JS ein onLoad Event zuzuweisen, oder?

z.B.

Schritt 1:
Code:
<body></body>

Schritt 2:
Code:
Seite mit JS wird geladen

Schritt 2:
Code:
<body onload="pagePreloader();"></body>

Ich kann leider nicht auf das body Tag zugreifen sonst würde ich es per Hand reinschreiben :p
JS soll aber bei einer bestimmten Seite eine onLoad Funktion hinzufügen.

Würde mich sehr um Tricks und Tipps freuen.

Herzliche Grüße :)
 
Auf der Seite wo ich das JS einbinden möchte ist das body Tag nicht vorhanden ;)
Meine Datei heisst "preloader.inc" (dort kann ich machen was ich will) und ist in die Main Page includiert wo auch das body Tag vorhanden ist. Auf diese Datei hab ich jedoch keinen zugriff.

Kann ich das Body Tag von der "preloader.inc" aus mit JS so manipulieren das ich ihm einen Event Handler hizufügen kann?

bsp.:
<body onload="pagePreloader();"></body>

Danke schonmal an dich :)
 
Wenn du in der "preloader.inc" machen kannst was du möchtest, dann binde dort jQuery ein und platziere den gewünschten Code in das $(document).ready-Ereignis.
 
Hätte das hier gerne umgesetzt, daher wäre die Variante mit dem Handler Event Super gewesen.
http://www.web-toolbox.net/webtoolbox/diverses/preloader-info.htm

Gibts dafür auch ne Möglichkeit das ich bei Script Aufruf dem body Tag einen Handler hinzufüge,.. ?

Danke schon einmal,..

Habe deine Idee auch probiert:

Code:
	$( document ).ready(pagePreloader() {
		if (document.getElementById) {  // DOM3 = IE5, NS6
        document.getElementById('pagePreloader').style.visibility = 'visible';

		}else {

    		if (document.layers) {  // Netscape 4
            document.pagePreloader.visibility = 'visible';

    	} else {  // IE 4

			document.all.pagePreloader.style.visibility = 'visible';

		  }
       }
    }

Klappt aber nicht,..
 
So Sieht meine gesamte preloader.inc aus:

Code:
<div id="pagePreloader" class="pagePreloader giro">
	<div class="pagePreloadeBox giro">

		<div class="pagePreloadeBox spinnerImg giro"></div>

		<div class="spinnerTxt giro">
			<span id="spinnerTxt"></span>
		</div>

	</div>
</div>

<script type='text/javascript'>

	<!--
    function time() {
        if (i < 100) {
            i++;
            document.getElementById('spinnerTxt').innerHTML = '<strong>' + i + '%</strong>';
        } else {
            window.clearInterval(inverval);
        }
    }
    var i 			=	0;
    var interval 	= 	window.setInterval('time()', 15);
    //-->


	function pagePreloader() {
		if (document.getElementById) {  // DOM3 = IE5, NS6
        document.getElementById('pagePreloader').style.visibility = 'visible';

		}else {

    		if (document.layers) {  // Netscape 4
            document.pagePreloader.visibility = 'visible';

    	} else {  // IE 4

			document.all.pagePreloader.style.visibility = 'visible';

		  }
       }
    }

</script>



EDIT:

und wenn ich die Funktion da reinpacke gehts auch nicht,..

Code:
	$(document).ready(function() {
		pagePreloader();
	}

EDIT:

Das tuts auch nicht wirklich -.-

Code:
    var element	= document.getElementByTagName('body');
    element.onload = pagePreloader() {
    }
 
Zuletzt bearbeitet:
HTML:
<style type="text/css">
#preload {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #800000;
	color: #FFFFFF;
}
</style>

<script type="text/javascript">
window.onload = preload;

function preload() {
	document.getElementById("preload").style.display = "none";
}
</script>

<div id="preload" class="preload" ><h1>DIE SEITE WIRD GELADEN!</h1></div>

Der obige Code entspricht der "preloader.inc". Wenn ich diese Datei per include in eine beliebige andere Datei einbinde, erhalte ich den gewünschten Effekt! Vorausgesetzt natürlich das die andere Datei eine gewisse Zeit braucht bis sie komplett geladen wird.
 
Includieren ist viel. das falsche Wort (auch wenn es eig. das selbe sein sollte). Die Dateien werden per Java geparset

Code:
#parse("/giro/common/includes/preloader/preloader.inc")

Leider funktieniert das mit dem oben aufgeführten Code nicht.
Das ganze sieht so momentan bei mir aus:

Code:
<style>
#pagePreloader {
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-image:url("/rechner/media/giro/img/global/bg/giro-blackwall.png");
	z-index:999999999;
}

pagePreloaderBox.giro {
	width:110px;
	height:130px;
	margin:auto;
	background-color:#fff;
	margin-top:15%;
	padding:15px;
	border-radius:6px;
	box-shadow:1px 5px 25px 1px #383838;
}

.spinnerImg {
	width:85px;
	height:85px;
	background-image:url("/rechner/media/giro/img/global/sonstiges/spinner_85px.gif");
	margin-top:10px;
	margin-left:10px;
}

.spinnerTxt.giro {
	float:left;
	width:100%;
	text-align:center;
	margin-top:10px;
	font-weight:bold;
}
</style>

<script type="text/javascript">
    window.onload = pagePreloader;

    function pagePreloader() {
    	document.getElementById("pagePreloader").style.display = "none";
    }
</script>

<div id="pagePreloader">
	<div class="pagePreloaderBox giro">

		<div class="spinnerImg"></div>

		<div class="spinnerTxt giro">
			<span id="spinnerTxt"></span>
		</div>

	</div>
</div>

<script type='text/javascript'>
    function time() {
        if (i < 100) {
            i++;
            document.getElementById('spinnerTxt').innerHTML = '<strong>' + i + '%</strong>';
        } else {
            window.clearInterval(inverval);
        }
    }
    var i 			=	0;
    var interval 	= 	window.setInterval('time()', 20);
</script>

Hmm,.. sollte eig. funktionieren,..
Hab das schon öffter gemacht,... hm...

Danke für deine Mithilfe :)
 
Zuletzt bearbeitet:
In der Funktion "time" ist ein Fehler enthalten:

Javascript:
// so sieht es jetzt aus -> inverval
window.clearInterval(inverval);
// so muss es aussehen -> interval
window.clearInterval(interval);

Wobei das sicher nichts mit dem eigentlichen Problem zu tun hat.
 
Zurück