FadeIn immagine dopo che è caricato

Question

Sto cercando di rendere l'immagine di essere caricato in div con effetto fadeIn. Il problema è che non so come evitare il caricamento e dissolvenza al tempo stesso. Voglio immagine da caricare e dopo che è stato completamente caricato esso dovrebbe essere sbiadito in.

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

Questi sono i pollici:

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

Questo è il contenitore in cui l'immagine deve essere caricata:

<div id="desna_kolona">
            <div id="slika"><img src="slike/c6.jpg" /></div>
        </div>

e questo è il file jquery:

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

    });

});

Ho cercato di usare complete sotto success ma ancora lo stesso risultato. Qualche consiglio?

Answer 1

Forse cerchi di associare un gestore onLoad per le immagini all'interno dei dati che viene caricati tramite la tecnologia AJAX.

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

Hai l'immagine nascosta per cominciare, come si dovrebbe. Quello che vorrei fare è aggiungere un gestore di eventi del carico per l'immagine, quindi eseguire l'AJAX per impostare il codice HTML. Nel vostro gestore di eventi del carico, sbiadire l'immagine nella Sarà più facile se si sostituisce l'origine dell'immagine esistente da allora si può aggiungere il gestore del carico ad esso -. Non funzionerà sul 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

Carica immagini utilizzando Immagine Oggetto . Spara evento load quando l'immagine viene scaricato. Così si mette immagine in #slika quando è al 100% scaricato e l'uso jQuery.fadeIn().

Answer 4

È necessario utilizzare una funzione di callback sull'evento .html.

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

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

modifica: questo in realtà non può funzionare a causa di .html essere un sincronismo. Cercavi di carico () invece?

Answer 5

È necessario emettere richiesta AJAX per quell'immagine, attendere che venga caricato completamente in ascolto su evento di successo. Questo vi aiuterà a ottenere l'immagine nella cache del browser. Poi si può fare a modo tuo. L'immagine verrà caricata subito dopo questo.