FadeIn Bild, nachdem es geladen ist
Ich versuche, das Bild geladen wird in das div mit fadeIn-Effekt. Problem ist, dass ich nicht weiß, wie zu vermeiden, laden und verblassen in der gleichen Zeit. Ich will Bild geladen werden und, nachdem es vollständig geladen wurde, sollte Sie eingeblendet werden.
http://www.izrada-weba.com/vedranmarketic
Diese sind Miniaturbilder:
<div id="thumbs">
<a href="#" class="slika_thumb" id="1"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="2"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="3"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a> </div>
</div>
Dies ist der container, in dem Bild geladen werden soll:
<div id="desna_kolona">
<div id="slika"><img src="slike/c6.jpg" /></div>
</div>
und das ist jquery-Datei:
$(document).ready(function(){
$('.slika_thumb').click(function() {
var id = $(this).attr("id");
$('#slika').hide();
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
$('#slika').html(data);
$('#slika').fadeIn();
}
});
});
});
Habe ich versucht zu verwenden complete
unten success
aber immer noch das gleiche Ergebnis.
Irgendwelche Ratschläge?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vielleicht versuchen Sie binden einen onload-handler, um alle Bilder innerhalb der Daten, die geladen wird via ajax.
Haben Sie das Bild versteckt, mit zu beginnen, wie Sie sollten. Was ich tun würde, ist das hinzufügen eines load-Ereignishandler, um das Bild, dann führen Sie Ihre AJAX der HTML. In Ihrer load-Ereignishandler, verblassen die Bild. Es wird einfacher sein, wenn Sie ersetzen Sie einfach die Quelle des vorhandenen Bild da, dann können Sie fügen Sie den load-Ereignishandler, um es-es funktioniert nicht bei der div.
Laden von Bildern mit Bild-Objekt. Es feuert
load
event, wenn Bild geladen wurde. So stellen Sie das Bild in#slika
wenn es zu 100% heruntergeladen und verwendenjQuery.fadeIn()
.Müssen Sie eine callback-Funktion auf .html-Ereignis.
edit: eigentlich nicht der Arbeit wegen .html wird ein synchroner Vorgang. Meinst du load() statt?
Müssen Sie die AJAX-Anfrage für das Bild, warten bis es komplett geladen durch das hören auf den Erfolg der Veranstaltung. Dies wird Ihnen helfen, um das Bild in den browser-cache. Dann können Sie es Ihre Weise. Das Bild wird geladen sofort nach dieser.