Question

我正在尝试创建一个简单的投资组合页面。我有一个拇指和图像列表。单击拇指时，图像将会改变。

当点击缩略图时，我希望图像淡出，等到图像加载，然后淡入。我现在的问题是有些图像非常大，所以它淡出，然后立即淡入，有时在图像仍然加载时。

我想避免使用setTimeout，因为有时图片的加载速度会比我设置的时间更快或更慢。

这是我的代码：

 $(function() {
     $('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));

     $('ul#thumbs li img').click(function() {
         $('img#image').fadeOut(700);

         var src = $(this).attr("src");
         $('img#image').attr("src", src);

         $('img#image').fadeIn(700);
     });
 });

<img id="image" src="" alt="" />
<ul id="thumbs">
    <li><img src="/images/thumb1.png" /></li>
    <li><img src="/images/thumb2.png" /></li>
    <li><img src="/images/thumb3.png" /></li>
</ul>

Answer 1

你可以这样做：

$('img#image').attr("src", src).one('load',function() {
  $(this).fadeIn(700);
}).each(function() {
  if (this.complete) $(this).trigger('load');
});

如果图像被缓存，在某些浏览器中.load()将不会触发，因此我们需要通过检查.complete并手动触发加载来检查并处理此情况。 .one()确保当时是否缓存或加载load处理程序仅触发一次。

Answer 2

 $(function() {
     $('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));

     $('ul#thumbs li img').click(function() {
         $('img#image').fadeOut(700);

         var src = $(this).attr("src");
         $('img#image')
             .attr("src", src)
             .load(function() {
                 $(this).fadeIn(700);
             });


     });
 });

<img id="image" src="" alt="" />
<ul id="thumbs">
    <li><img src="/images/thumb1.png" /></li>
    <li><img src="/images/thumb2.png" /></li>
    <li><img src="/images/thumb3.png" /></li>
</ul>

Answer 3

您需要对动画进行排队。

See this page for more info + possible solutions

等到执行功能之前图像加载

3 个答案: