FADEIN image après son chargement

Question

Je suis en train de faire l'image d'être chargée dans div avec effet fadeIn. Le problème est que je ne sais pas comment éviter le chargement et la décoloration en même temps. Je veux l'image à charger et après qu'il est complètement chargé, il devrait être dans fanée.

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

Ce sont les pouces image:

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

est récipient où l'image doit être chargé:

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

et ce fichier est 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();
          }
        });    

    });

});

J'ai essayé d'utiliser complete ci-dessous success mais toujours le même résultat. Un conseil?

Answer 1

Peut-être essayer de lier un gestionnaire onload à toutes les images à l'intérieur des données qui se charge via 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

Vous avez l'image cachée pour commencer, comme vous devriez. Ce que je voudrais faire est d'ajouter un gestionnaire d'événements de charge à l'image, puis exécutez votre AJAX pour définir le HTML. Dans votre gestionnaire d'événements de charge, effacer l'image Il sera plus facile si vous remplacez seulement la source de l'image existante puisque vous pouvez alors ajouter le gestionnaire de charge à lui -. Il ne fonctionnera pas sur la 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

Charger les images en utilisant image objet . Il tire événement load lorsque l'image est téléchargée. Si vous mettez l'image en #slika quand il est à 100% ont téléchargé et l'utilisation jQuery.fadeIn().

Answer 4

Vous devez utiliser une fonction de rappel sur l'événement .html.

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

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

edit: cela peut effectivement ne pas fonctionner en raison de .html étant une opération synchrone. Vouliez-vous dire load () à la place?

Answer 5

Vous devez émettre requête AJAX pour cette image, attendez qu'il soit complètement chargé en écoutant le succès de l'événement. Cela vous aidera à obtenir l'image dans le cache du navigateur. Ensuite, vous pouvez le faire à votre façon. L'image sera chargée instantanément après.