Autor |
Nachricht |
BehindTheScenes
Threadersteller
Dabei seit: 02.02.2007
Ort: NRW
Alter: -
Geschlecht:
|
Verfasst Fr 27.07.2007 21:30
Titel onLoad und CSS - background-image |
|
|
Hallo,
ich habe in meiner HTML Datei einige Div-Tags, die mit background-image ausgestattet sind.
--------------------------------------------------
Code: | ...
<body onload="alert('Blub');">
<div id="div_top"></div>
<div id="div_main">
<div id="div_gate_left" onload="alert('blub2');"></div>
<div id="div_gate_right"></div>
<div id="div_main_area"></div>
<div id="div_nav_bottom">
<a href="#partner">Partner</a> |
<a href="#kontakt">Kontakt</a> |
<a href="#impressum">Impressum</a>
</div>
</div>
</body>
</html> |
---------------------------------------------------
So, leider wird "alert('Blub')" zu früh aufgeruffen. Das heist, der HTML Code wurde zwar schon runtergeladen, aber die Background-Images noch nicht.
Wie kann ich abfragen, ob wirklich alles geladen wurde, auch die background-images?
Danke schonmal.
MfG
|
|
|
|
|
schachbrett
Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Sa 28.07.2007 17:09
Titel
|
|
|
Code: | window.onload = function() {
alert( "Fertig!" );
} |
|
|
|
|
|
Anzeige
|
|
|
BehindTheScenes
Threadersteller
Dabei seit: 02.02.2007
Ort: NRW
Alter: -
Geschlecht:
|
Verfasst Sa 28.07.2007 19:30
Titel
|
|
|
ehm,
das selbe ergebniss
MfG
|
|
|
|
|
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 28.07.2007 19:41
Titel
|
|
|
was ist denn eigentlich sinn & zweck des ganzen? dann kann man's
evtl auch anders lösen .. mir wäre zumindest keine möglichkeit
bekannt abzufragen ob hintergrund bilder geladen wurden ..
|
|
|
|
|
BehindTheScenes
Threadersteller
Dabei seit: 02.02.2007
Ort: NRW
Alter: -
Geschlecht:
|
Verfasst Sa 28.07.2007 21:51
Titel
|
|
|
dastef hat geschrieben: | was ist denn eigentlich sinn & zweck des ganzen? |
Der Sinn ist, dass nachdem alle Graphiken geladen sind, eine Animation, die mit JS gelöst ist abgespielt wird. z.B eine Fade-In der ganzen Seite.
MfG
|
|
|
|
|
BuddhaBone
Dabei seit: 09.08.2005
Ort: Hamburg
Alter: -
Geschlecht:
|
Verfasst Do 06.12.2007 22:27
Titel
|
|
|
Ich verstehe dein Problem (JETZT ERST GANZ), hab selbiges (ÄHNLICHES) vor Jahren auch schon mal versucht. Bin irgendwie durchs Netz auf eine Technik gekommen, die mir allerdings zu umständlich schien, weil der Ansatz an sich ja gewisse Unzulänglichkeiten impliziert.
ZU MEINEM FOLGENDEN TIP: Ich weiss nicht, ob's dieses Attribut auch bei BG-Images gibt... befürchte nicht :/
Mein Tip wäre: Du schreibst dir ein Script, daß bei body.onLoad checkt, ob schon alle IMG-Tags des DOM geladen wurden, bevor es mit seinem Effekt beginnt. Die Tags sind als Array abrufbar, jedes IMG-Objekt hat nen Attribut, das Auskunft darüber gibt, ob es fertig geladen wurde - frag mich nicht nach dem genauen Namen der Eigenschaft). Das wäre schon die Lösung, wenn dabei nicht automatisch das Problem auftreten würde, daß der User entweder ne Zeit lang (-> Bilder zu Ende laden) gar nix sieht und sich vielleicht sogar wundert, daß nix Offensichtliches passiert und abhaut oder daß sich die Seite zum Teil aufm Screen aufbaut und die ganze Fade-"Kagge" nachträglich alles nochmal ausblendet und einfadet, was sehr strange wirken würde. Ich denke, als MG kann man diesen ästhetischen Bruch einfach nicht tolerieren, aber das sei natürlich dir überlassen. Ich hoffe, du kommst da weiter und hin, wo du hin willst.
Einen schönen Abend noch!
Martin
Zuletzt bearbeitet von BuddhaBone am Do 06.12.2007 22:29, insgesamt 2-mal bearbeitet
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 07.12.2007 08:07
Titel
|
|
|
Andere Möglichkeit: bei onload einen new Asset Handler
aufrufen, der alle bg-images läd und an diesen wiederum
ein onComplete-Event dranhängen der dann deine Animation
oder was auch immer startet.
http://docs.mootools.net/Remote/Assets.js
|
|
|
|
|
|
|
|
Ähnliche Themen |
background-image & FF
CSS background-image
[CSS] alt-tag für background-image?
[CSS] Background-image INE
CSS background-image mit em ?
problem mit background image und ul/li
|
|