Imagem de fadein depois de ser carregada

Question

Estou tentando fazer com que a imagem seja carregada na div com efeito Fadein. O problema é que não sei como evitar carregar e desaparecer ao mesmo tempo. Eu quero que a imagem seja carregada e, depois de estar completamente carregada, deve ser desbotada.

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

Estes são os polegares da imagem:

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

Este é o recipiente onde a imagem deve ser carregada:

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

E este é o arquivo 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();
          }
        });    

    });

});

Eu tentei usar complete abaixo de success mas ainda assim o mesmo resultado. Algum conselho?

Answer 1

Obtímos o mesmo problema, e a única maneira de indexar uma coluna de metadados foi criar um documento falso e executar um rastreamento para poder usá-lo.

De acordo com a equipe de Dev da minha empresa, foi a única maneira de encontrar para resolver isso.Desculpe.

Answer 2

Você tem a imagem escondida para começar, como deveria. O que eu faria é adicionar um manipulador de eventos de carga à imagem e executar seu Ajax para definir o HTML. No seu manipulador de eventos de carga, desbote a imagem. Será mais fácil se você apenas substituir a fonte da imagem existente desde então você poderá adicionar o manipulador de carga - ele não funcionará na 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

Carregue imagens usando Objeto de imagem. Dispara load evento quando a imagem é baixada. Então você coloca a imagem em #slika quando é 100% baixado e use jQuery.fadeIn().

Answer 4

Você precisa usar uma função de retorno de chamada no evento .html.

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

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

EDIT: Na verdade, isso pode não funcionar devido ao .html sendo uma operação síncrona. Você quis dizer carregar () em vez disso?

Answer 5

Você deve emitir uma solicitação AJAX para essa imagem, aguarde que ela seja carregada completamente ouvindo o evento de sucesso. Isso ajudará você a colocar a imagem no cache do navegador. Então você pode fazer do seu jeito. A imagem será carregada instantaneamente depois disso.