FadeIn Bild, nachdem es geladen wird

Question

Ich versuche Bild zu machen, die geladen in div mit fadeIn Wirkung. Problem ist, dass ich weiß nicht, wie Belastung zu vermeiden und zugleich Verblassen. Ich mag Bild geladen werden und, nachdem es vollständig geladen ist es eingeblendet werden soll.

http://www.izrada-weba.com/vedranmarketic

Dies sind Bild Daumen:

<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>

Das ist 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();
          }
        });    

    });

});

Ich habe versucht, complete unter success zu verwenden, aber immer noch das gleiche Ergebnis. Jede Beratung?

Answer 1

Vielleicht versuchen, ein onload-Handler auf Bilder innerhalb der Daten zu binden, die über Ajax geladen wird.

$(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 img').bind("load", function() {
            $('#slika').fadeIn();  
          });
        }
      });    

  });

});

Answer 2

Sie haben das Bild versteckt, mit zu beginnen, wie Sie sollten. Was ich tun würde, ist ein Last-Ereignishandler zum Bild hinzufügen, dann führen Sie Ihre AJAX die HTML einzustellen. In Ihrer Event-Handler-Last, verblassen das Bild in es einfacher sein wird, wenn Sie nur die Quelle des vorhandenen Bildes ersetzen, da dann können Sie die Lastaufnahmemittel, um es hinzuzufügen -. Es wird nicht funktionieren auf dem div

.

$(document).ready(function(){

    $('#slika').find('img').load( function() {
         $(this).fadeIn();
    });

    $('.slika_thumb').click(function() {
        var id = $(this).attr("id");
        $('#slika').hide().find('img').hide();

        $.ajax({
          url: 'slike/slika.php?id=' + id,
          success: function(data) {
            var src = $(data).find('img').attr('src');       
            $('#slika').show().find('img').attr('src',src);
          }
        });    

    });

});

Answer 3

Bilder laden mit Bildobjekt . Sie feuert load Ereignis, wenn Bild heruntergeladen wird. So können Sie Bild in #slika setzen, wenn es zu 100% heruntergeladen und Verwendung jQuery.fadeIn().

Answer 4

Sie müssen eine Callback-Funktion auf dem .html-Ereignis verwenden.

    $.ajax({
      url: 'slike/slika.php?id=' + id,
      success: function(data) {

        $('#slika').html(data, function() {
           $('#slika').fadeIn();
        });
      });
    });  

edit: das kann eigentlich nicht durch Arbeit ist ein synchroner Betrieb .html. Meinten Sie load () statt?

Answer 5

Sie müssen AJAX Erteilungsanfrage für das Bild, warten, bis es durch das Hören auf Erfolgsereignis vollständig geladen werden. Dies wird Ihnen helfen, das Bild in den Browser-Cache zu erhalten. Dann können Sie es Ihren Weg machen. Das Bild wird sofort danach geladen werden.