Einblenden von Elementen nach vollständigem Laden der Seite

[Ole]

Guten Morgen,

ich suche nach einer Lösung die es mir ermöglicht Elemente einer Seite, die per CSS  "display: none;" ausgeblendet wurden nach dem vollständigen Laden der Seite einzublenden.

Jetzt wird der eine oder andere denken: Ist doch ganz einfach! Mitteln "onload" einfach eine entsprechende Funktion aufrufen und fertig.

Ganz so einfach ist es aber leider nicht. Der Event-Handler onload steht mir nicht zur Verfügung.

Ich habe es hier mit einem vorsintflutlichen CMS zu tun, dass zum Glück im Laufe des Jahes ausgemustert wird und muss mich mit den Gegebenheiten irgendwie arrangieren.

Ich habe also ein Stück-Quellcode der an einer beliebigen Stelle der Seite eingebunden wird...inkl. Script- und Style-Bereich (ich weiß, macht man nicht, geht aber nicht anders).
In diesem Bereich werden Bilder geladen, die jedoch erst angezeigt werden sollen, wenn all diese Bilder (alternativ die ganze Seite) geladen wurden.

Mein Code sieht in etwa so aus:

  
<!-- ================================ Banner ===================== -->  
  
<script type="text/javascript" src="jquery-1.2.6.js"></script>  
<script type="text/javascript" src="jquery.cycle.all.js"></script>  
  
<script type="text/javascript">  

~~~~~~javascript
  
$(function() {  
 $('.headbannrot').cycle({  
  random: 1,  
  fx:     'fade',  
  speed:   500,  
  timeout: 6000  
 });  
});  

~~~~~~html
  
</script>  
  
<style type="text/css">  

~~~~~~css
  
.headbannrot {position: relative; width: 486px; height: 60px; top: 5px; left: 75px;}  
.headbannrot a img {border: none;}  

~~~~~~html
  
</style>  
  
<div class="headbannrot" id="slot_1_1">  
<a href="#"><img src="banner_1.jpg" alt="" /></a>  
<a href="#"><img src="banner_2.jpg" alt="" /></a>  
<a href="#"><img src="banner_3.jpg" alt="" /></a>  
<a href="#"><img src="banner_4.jpg" alt="" /></a>  
<a href="#"><img src="banner_5.jpg" alt="" /></a>  
<a href="#"><img src="banner_6.jpg" alt="" /></a>  
</div>  
  
<!-- ============================= eo Banner ===================== -->  
  

Das Ausblenden der Banner ist ja ganz einfach via

  
#slot_1_1 {display: none;}  

Wie bekomme ich das Ganze nun wieder angezeigt nachdem alle Bilder geladen wurden?

Danke & Grüß
Ole
(8-)>

[ChrisB]

Hi,

Der Event-Handler onload steht mir nicht zur Verfügung.

Ich habe es hier mit einem vorsintflutlichen CMS zu tun, dass zum Glück im Laufe des Jahes ausgemustert wird und muss mich mit den Gegebenheiten irgendwie arrangieren.

Aber Script-Elemente kannst du einbinden?
Dann nutze darin window.onload.

MfG ChrisB

[Ole]

Hallo,

Aber Script-Elemente kannst du einbinden?
Dann nutze darin window.onload.

Ja, kann ich. Erzielt aber dem Augenschein nach nicht das gewünscht Ergebnis.

  
<script type="text/javascript">  
<!--  
function omBanner()  
{  
document.getElementById("slot_1_1").style.visibility = "visible";  
}  
window.onload = omBanner();  
//-->  
</script>  

Führt zum gleichen Ergebnis (habs sowohl mit display als auch mit visibility probiert).

Deklariere ich den Script Teil vor dem HTML-Part bekomme ich eine Fehlermeldung '"slot_1_1" is null' ...klar, gibt es bis zu der Stelle ja auch nicht.

alternativ habe ich

  
window.onload = document.getElementById("slot_1_1").style.visibility = "visible";  

probiert. Machte aber wie erwartet keinen Unterschied.

Evtl. gibt es ja auch Probleme mit eventuellen Wechselwirkungen mit jQuery. Ich werd mal weiter rumprobieren.

Danke
Ole
(8-)>

[ChrisB]

Hi,

Ja, kann ich. Erzielt aber dem Augenschein nach nicht das gewünscht Ergebnis.

Natuerlich nicht, weil du hier

window.onload = omBanner();

die Funktion direkt ausfuehrst, und ihren Rueckgabewert window.open zuweist.

Klammern Weglassen!

MfG ChrisB

[Ole]

Hallo,

Natuerlich nicht, weil du hier

window.onload = omBanner();

die Funktion direkt ausfuehrst, und ihren Rueckgabewert window.open zuweist.

Klammern Weglassen!

Oh, es ist einfach noch zu früh.

Vielen Dank. Funktioniert jetzt.

Gruß
Ole
(8-)>

[Joachim]

Hi,

window.onload = omBanner();

warum willst Du onload verwenden, wo Du doch jquery einbindest: nutze doch $(document).ready()...

Gruesse, Joachim

[Ole]

Hallo Joachim,

habe ich mittlerweile auch gefunden. Hatte mich im Laufe des Tages ein wenig mehr mit jQuery beschäftigt und bin dann auf diese tolle Möglichkeit gestoßen.

Danke & Gruß
Ole
(8-)>