加载后淡入淡出图像 [英] FadeIn image after it is loaded

问题描述

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

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

这些是图像大拇指：

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

这是jquery文件：

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

    });

});

我试图在 c>以下 c $ c>成功但结果仍然相同。
有什么建议吗？

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

推荐答案

也许尝试将onload处理程序绑定到通过ajax加载的数据中的任何图像。

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

  });

});

这篇关于加载后淡入淡出图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！