CODEWITHSUNDEEP
jqueryimageloadfadein
ilija veselica
ilija veselica

Reputation: 9574

FadeIn image after it is loaded

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?

Upvotes: 2

Views: 6402

Answers (5)

tvanfosson
tvanfosson

Reputation: 532435

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

    });

});

Upvotes: 1

alemjerus
alemjerus

Reputation: 8268

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.

Upvotes: 0

Dave Kiss
Dave Kiss

Reputation: 10487

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?

Upvotes: 0

jessegavin
jessegavin

Reputation: 75640

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

  });

});

Upvotes: 5

Crozin
Crozin

Reputation: 44376

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().

Upvotes: 0

Related Questions