| 

.NET C# Java Javascript Exception

4
Problem:
Das Bild fadet ein, aber gleichzeitig baut es sich erst von oben nach unten auf.
Wenn alles im Browser Cache ist kann ich die Galerie problemlos durchklicken und alles fadet schön ein.

Die aktuelle Seite, vereinfacht:

<div id="ajax" class="item">

<div id="bild_anzeigen" class="bild_breit">
<div class="bild_info">
<h1>Text</h1>
<p>Text</p>
</div>
<a href="#" title="titel" rel="alias"><img src="bild.jpg" title="Titel" width="1900" height="704" alt="Titel"></a>
</div>

</div>


Genau so sieht sozusagen die 2. Seite aus nur halt mit anderen Texten / Bild.
Wenn man auf das Bild klickt:

$("#bild_anzeigen").live("click",function(){
var alias = $(this).children("a").attr("a");
$("#ajax").empty();
$("#ajax").load(alias +' #ajax', function() {
$("#bild_anzeigen img").fadeIn("slow");
});
return false;
});


Wie kann ich es machen, dass das neu geladene Div erst einblendet wenn das Bild komplett geladen ist?

Für jeden Tipp dankbar.
Es sind zu viele Bilder um es direkt zu laden (ausgeblendet) und dann nur einzublenden, deshalb Ajax.

Gruss
Michel
News:
18.09.2012
windblick 13 1 3
3 Antworten
3
$("#bild_anzeigen img").load(function() {
$(this).fadeIn("slow");
});


Alternativ kannst du dir auch die Implementierung in https://github.com/desandro/imagesloaded/blob/master/jquery.imagesloaded.js anschauen. Die ist etwas komplexer kommt aber mit ein paar Eigenheiten und Bugs besser klar.
18.09.2012
Floyd 14,6k 3 9
Floyd 14,6k 3 9
0
Super, scheint zu klappen, vielen lieben dank für die schnelle Hilfe.
18.09.2012
windblick 13 1 3
0
Die oben genannte Lösung ist für das vorliegende Problem sicher die beste.

Es gibt eine interessante Methode, mit der verschiedene Problemchen mit ähnlichen Anwendungsfällen gelöst werden können:

Es wird ein DIV erzeugt außerhalb des sichtbaren Bereichs, z.B. durch absolute Positionierung mit left:-10000px und top:-10000px in welchem alles so weit vorbereitet wird, und dann erst wird es in den sichtbaren Bereich an die richtige Stelle platziert.

So kann man natürlich nicht erfahren, wann das Bild vollständig geladen wird, aber es ist manchmal einfacher z.B. die Breiten von Elementen abzufragen, wenn sie im Browser geladen sind und nicht unsichtbar sind.

Einfach mal als Anregung.
19.09.2012
johny7 521 1 8

Stelle deine Javascript-Frage jetzt!