它被加载后淡入图像

Question

我试图使图像被加载到淡入效果股利。问题是，我不知道如何避免负载和衰落的同时。欲加载图像，并完全装入后，应该在被褪色。

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

  });

});

Answer 2

您已经隐藏开始与形象，你应该。我会做的就是添加一个load事件处理程序的图像，然后运行AJAX来设置HTML。在您的Load事件处理程序，褪色的图像会更容易，如果你只是替换现有图像的来源，因为你就可以将负载处理程序添加到它 - 它不会对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活动图像被下载时。所以，你把图像分为#slika时的100％的下载和使用jQuery.fadeIn()。

Answer 4

您需要使用一个回调函数对html的事件。

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

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

编辑：这实际上可能不起作用由于.HTML是一个同步操作。您的意思是load（）方法呢？

Answer 5

您必须发出该图像AJAX请求，等它被监听成功事件完全加载。这将帮助你以获取图像到浏览器的缓存。然后，你可以做你的方式。图像将即刻在此之后被加载。