代码之家 › 专栏 › 技术社区 › ilija veselica

加载后的FadeIn图像

fadein load image jquery

ilija veselica · 技术社区 · 14 年前

我试图使图像加载到具有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 但结果还是一样。

5 回复 | 直到 10 年前

jessegavin 14 年前

可能尝试将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();  
          });
        }
      });    

  });

});

tvanfosson 14 年前

首先,您应该隐藏图像。我要做的是在图像中添加一个加载事件处理程序,然后运行AJAX来设置HTML。在加载事件处理程序中,淡入图像。如果您只是替换现有映像的源代码,那么就更容易了,因为您可以向其添加加载处理程序——它在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);
          }
        });    

    });

});

Crozin 14 年前

使用加载图像 Image Object . 它开火了 load 下载图像时发生的事件。所以你把图像放进 #slika 当它100%下载并使用 jQuery.fadeIn()

Dave Kiss 14 年前

您需要对.html事件使用回调函数。

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

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

alemjerus 14 年前

您必须对该图像发出AJAX请求,通过监听成功事件等待它完全加载。这将帮助您将图像放入浏览器缓存。那你就可以用你自己的方式了。图像将在此之后立即加载。