Anzeigereihenfolge von Bildern
Nathalie
- javascript
Hallo Community
Bitte um Hilfe bei folgender Zielsetzung:
Eine HTML-Seite beinhaltet ein großes und mehrere kleine Bilder. Die kleinen Bilder sollen erst angezeigt werden wenn das Große geladen ist und angezeigt wird.
Soweit bin ich schon (auszugsweise):
<script type="text/javascript">
<!--
document.getElementById('kleinebilder').style.visibility="hidden";
function anzeigen() {
document.getElementById('kleinebilder').style.visibility ="visible";
}
//-->
</script>
<body onload="anzeigen();">
<img src="grossesbild.jpg" width="874" height="670" alt="" />
<div id="kleinebilder">
<img src="kleinsbild1.jpg" width="50" height="50" alt="" />
<img src="kleinsbild2.jpg" width="50" height="50" alt="" />
</div>
Irgendwie funktioniert dies noch nicht so wie oben beschrieben, die kleinen Bilder werden sofort angezeigt und danach erst das Große.
Was mache ich da falsch?
Bitte um Hilfe in leicht verständlichen Worten, meine Javascript-Kenntnisse sind eher gering...
Danke, Nathalie
hi,
Eine HTML-Seite beinhaltet ein großes und mehrere kleine Bilder. Die kleinen Bilder sollen erst angezeigt werden wenn das Große geladen ist und angezeigt wird.
[...]
<body onload="anzeigen();">
[...]
Irgendwie funktioniert dies noch nicht so wie oben beschrieben, die kleinen Bilder werden sofort angezeigt und danach erst das Große.
onload feuert erst dann, wenn das Laden _aller_ externen Ressourcen beendet wurde. Es ist also für dein Vorhaben untauglich.
Das, was ich gerade eben schon in einem anderen Thread empfohlen habe, könnte da zielführender sein.
gruß,
wahsaga
onload feuert erst dann, wenn das Laden _aller_ externen Ressourcen beendet wurde. Es ist also für dein Vorhaben untauglich.
Wenn "das Laden _aller_ externen Ressourcen" bedeutet das onload erst feuert wenn alle Bilder geladen sind - also die kleinen Bilder UND das Große - wäre es für mein Vorhaben ja das Richtige.
Oder übersehe ich da was?
Nathalie
Hi,
<script type="text/javascript">
<!--
document.getElementById('kleinebilder').style.visibility="hidden";
function anzeigen() {
document.getElementById('kleinebilder').style.visibility ="visible";
}
//-->
Was mache ich da falsch?
Beim Verstecken ist das Element doch noch gar nicht vorhanden! (Das sollte dir auch die Fehlerkonsole melden!)
Entweder Du erzeugst mit JS *CSS*-Code, der dafür sorgt, daß das Element mit der ID versteckt wird, oder Du setzt das Versteckscript hinter oder in das DIV-Element selbst:
<div id="kleinebilder"><script type="text/javascript"><!--
if(document.getElementById && document.getElementById('kleinebilder')) { document.getElementById('kleinebilder').style.visibility="hidden"; }
//--></script>
<img src="kleinsbild1.jpg" width="50" height="50" alt="" />
<img src="kleinsbild2.jpg" width="50" height="50" alt="" />
</div>
Gruß, Cybaer
Super, Danke - genau das was ich suchte!!!!!
Und mit etwas experiementieren hab ich auch den Rest gefunden...