FadeIn image after it is loaded

Question

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?

Answer 1

우리는 동일한 문제를 얻고 메타 데이터 열을 인덱싱하는 유일한 방법은 가짜 문서를 만들고 크롤링을 실행하여 사용할 수 있도록합니다.

우리 회사의 Dev 팀에 따르면, 그것은 우리가 이것을 해결하는 유일한 방법이었습니다.죄송합니다.

Answer 2

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

    });

});

Answer 3

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 4

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 5

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.