imagen FadeIn después de que se ha cargado

Question

Estoy tratando de hacer una imagen de ser cargado en div con efecto fadeIn. El problema es que no sé cómo evitar la carga y el desvanecimiento al mismo tiempo. Quiero imagen para cargar y después de que esté completamente cargado Cabe desvaneció en.

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

Estos son los pulgares imagen:

<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 es contenedor donde la imagen debe ser cargado:

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

y este es el archivo de 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();
          }
        });    

    });

});

He intentado utilizar complete continuación success pero sigue siendo el mismo resultado. Cualquier consejo?

Answer 1

Tal vez tratar de enlazar un controlador onload a alguna de las imágenes dentro de los datos que se carga a través de 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

tiene la imagen oculta, para empezar, como debería. Lo que quiero hacer es añadir un controlador de eventos de carga a la imagen, a continuación, ejecutar su AJAX para establecer el código HTML. En el controlador de eventos de carga, se desvanecen en la imagen Será más fácil si usted acaba de cambiar la fuente de la imagen existente desde entonces se puede agregar el controlador de carga a él -. No va a funcionar en el 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

Cargar imágenes utilizando imagen del objeto . Se desencadena el evento load cuando se descarga la imagen. Por lo que poner imagen en #slika cuando es 100% descargado y uso jQuery.fadeIn().

Answer 4

Es necesario utilizar una función de devolución de llamada en el caso .html.

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

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

Edit: En realidad, esto no puede trabajar debido a .html ser una operación sincrónica. ¿Te ha carga media () en su lugar?

Answer 5

Debe emitir petición AJAX para esa imagen, esperar a que se cargue por completo por la escucha en caso de éxito. Esto le ayudará a obtener la imagen en la memoria caché del navegador. A continuación, puede hacerlo a su manera. La imagen se cargará inmediatamente después de esto.