✔ [jQuery] Element erst anzeigen nachdem Bilder geladen funktioniert teilweise

josDesign

josDesign

Erfahrenes Mitglied
Hallo,

ich habe auf meiner Seite einen DIV#media welcher Bilder enthält. Von Haus aus ist dieser mit CSS ausgeblendet. Nun, sobald alle Bilder geladen sind, soll dieser MIttels .fadeIn eingeblendet werden. Dies funktoiniert auch wunderbar. Wenn man jedoch auf diese besagte Seite mittels Browser Vor/Zurück "hinsurft" wird der Div nicht eingeblendet und bleibt weg.

Gibt es eine Möglichkeit auch dies noch zu beachten? (Anbei der verwendete Code bisher)

Code: 
$('img').load(function() {
	$('#media').fadeIn(3500);
});

Mit bestem Dank im Voraus,
jos
 
Moin Jos,

scheinbar feuert da bei den Bildern kein onload....ist mir noch nie aufgefallen :eek:

Wieauchimmer...du blendest das <div> auch nicht ein, wenn alle Bilder geladen sind, sondern, sobald das 1. geladen ist.

Mein Vorschlag würde so aussehen:
Code: 
<script type="text/javascript">
<!--
$('html').addClass('scripted');
$(document).ready(function(){
    $('#media').fadeIn(3500);
});
//-->
</script>
<style type="text/css">
<!--
.scripted #media{display:none;}
-->
</style>

1.
Code: 
$('html').addClass('scripted');
dem <HTML>-Element eine Klasse verpassen, so hast du einen Selektor, der nur bei aktiviertem JS greift, und hast die Möglichkeit, bei abgeschaltetem JS das <div> trotzdem zu zeigen

2. Statt des img-load den onload-Event des Dokuments überwachen.
Bei diesem gibt es anscheinend nicht die Probleme wie bei den Bildern, und wenn er feuert, sind auch alle Bilder geladen.
 
oh, danke! Ich werde das gleich mal probieren.

thx,
jos

EDIT: die Anweisungen nun direkt im Body reinschreiben, oder wie? Bin da noch nicht so fit im JS..
 
josDesign hat gesagt.:
EDIT: die Anweisungen nun direkt im Body reinschreiben, oder wie?
Zum Vergrößern anklicken....
Der <script>-Bereich wird im jQuery-Framework i.d.R. im Anschluß an die involvierten Objekte notiert, oder am Ende des Dokuments vor </body></html>.

Da Sven in seinem Script aber $(document).ready() nutzt, lässt sich das Script im Dokumentheader aufrufen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück