javascript - 等到图像加载后再执行功能

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 处理程序只触发一次。