加载后的淡入图像答案

【问题标题】：FadeIn image after it is loaded加载后的淡入图像
【发布时间】：2010-01-23 20:59:46
【问题描述】：

我正在尝试将图像加载到具有淡入效果的 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();
          }
        });    

    });

});

我尝试在success 下方使用complete，但结果仍然相同。有什么建议吗？

【问题讨论】：

标签： jquery image load fadein

【解决方案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();  
          });
        }
      });    

  });

});

【讨论】：

$('#slika img').bind("load", function() { $('#slika').fadeIn(); }); - 这不起作用，但这个起作用： $('#slika img').load($('#slika').fadeIn());

【解决方案2】：

您应该从一开始就隐藏图像。我要做的是向图像添加一个加载事件处理程序，然后运行您的 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);
          }
        });    

    });

});

【讨论】：

谢谢，这个解决方案也不错！

【解决方案3】：

使用Image Object 加载图像。下载图像时会触发load 事件。因此，当图像 100% 下载并使用jQuery.fadeIn() 时，您将图像放入#slika。

【讨论】：

【解决方案4】：

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

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

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

编辑：由于 .html 是同步操作，这实际上可能不起作用。你的意思是 load() 吗？

【讨论】：

我没有完全理解你，但 jessegavin 解决了我的问题。谢谢

【解决方案5】：

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

【讨论】：