jQuery: FadeIn image after it is loaded

Question

Hi, I'm trying to make image being loaded into div with fadeIn effect. Problem is that I don't know how to avoid loading and fading at the same time. I want image to be loaded and after it is completely loaded it should be faded in.

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

These are image thumbs:

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

This is container where image should be loaded:

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

and this is jquery file:

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

    });

});

I tried to use complete below success but still the same result. Any advice?

Thanks in advance, Ile

Answer 1

Load images using Image Object. It fires load event when image is downloaded. So you put image into #slika when it's 100% downloaded and use jQuery.fadeIn().

Answer 2

Maybe try to bind an onload handler to any images inside the data which gets loaded 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 3

You need to use a callback function on the .html event.

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

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

edit: this actually may not work due to .html being a synchronous operation. Did you mean load() instead?

Answer 4

You must issue AJAX request for that image, wait for it to be loaded completely by listening on success event. This will help you to get the image into the browser cache. Then you can do it your way. The image will be loaded instantly after this.

Answer 5

You have the image hidden to start with, as you should. What I would do is add a load event handler to the image, then run your AJAX to set the HTML. In your load event handler, fade the image in. It will be easier if you just replace the source of the existing image since then you can add the load handler to it -- it won't work on the 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);
          }
        });    

    });

});