在执行功能之前等待图像加载

I'm trying to create a simple portfolio page. I have a list of thumbs and an image. When you click on a thumb, the image will change.

我想创建一个简单的投资组合页面。我有一个拇指列表和一张图片。当你点击一个拇指，图像将会改变。

When a thumbnail is clicked, I'd like to have the image fade out, wait until the image is loaded, then fade back in. The problem I have right now is that some of the images are pretty big, so it fades out, then fades back in immediately, sometimes while the image is still loading.

当一个缩略图被点击时，我希望图像淡出，等待图像被加载，然后再淡入。我现在遇到的问题是有些图像很大，所以它会淡出，然后立刻淡出，有时当图像还在加载时。

I'd like to avoid using setTimeout, since sometimes an image will load faster or slower than the time I set.

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

Here's my code:

这是我的代码:

 $(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>

3 个解决方案

#1

You can do it like this:

你可以这样做:

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

If an image is cached, in some browsers .load() won't fire, so we need to check for and handle this case by checking .complete and firing load manually. .one() ensures whether it's cached or loaded at that time, that the load handler only fires once.

如果一个映像被缓存，那么在某些浏览器.load()中不会触发，所以我们需要通过手动检查.complete并触发load来检查和处理这种情况。

#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>

#3

You need to queue the animations.

您需要对动画进行排队。

See this page for more info + possible solutions

更多信息+可能的解决方案请参见此页

#1