加载后淡入淡出图像

Question

我正在尝试使用fadeIn效果将图像加载到div中.问题是我不知道如何避免同时加载和褪色.我想要加载图像,在完全加载后它应该被淡入.

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

这些是图像拇指:

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

这是应该加载图像的容器:

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

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

    });

});

我尝试使用complete下面success但仍然相同的结果.有什么建议？

Answer 1

也许尝试将onload处理程序绑定到通过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();  
          });
        }
      });    

  });

});