当图片加载时显示加载动画

Question

我有以下列表，当用户点击一个 li 元素时，我想隐藏 ul.list 并显示 div.single，同时将 img.data-img 的 src 设置为 li 指定的 data-img 属性，但在加载过程中，我希望将img元素的src设置为li元素内的loader.gif。

<ul class="list">
<li data-id="7" data-thumb="http://test.com/assets/pdc/thumbs/66.png" data-img="http://test.com/assets/pdc/img/66.png" data-country="Australia" data-company="Big Farm" data-app="Tea" data-brand="Big Farm" data-package="500" class="product air-500 cat7">
    <img class="tip" data-country="Australia" data-brand="Big Farm" src="assets/img/ajax-loader.gif">
</li>
</ul>

<div class="single">
<img class="data-img" src="">
</div>

var preloader = $(this).find('.tip').attr('src');

$('.single aside img').attr('src', preloader);
$('.single aside img').attr('src', url).load(function () { 
            });

- user1937021

Answer 1

判断图片是否加载完成有时候确实很困难；你可能只想预先加载图片（使用$("<img>").attr('src', src)就足够了）。

你可以依赖于.load，但根据我的经验它并不是100%可靠的：

$("li").on('click', function () {
   var $this = $(this);
   //Show the throbber
   $this.find('.tip').show();

   //After image finishes loading, hide the `ul.list`
   $(".single .data-img").attr('src', $this.data-img).load(function () {
      $this.closest('.list').hide();    
   });
});

- Explosion Pills

---

嗨，谢谢，它可以工作，但我希望 .list 立即隐藏起来，而不是等到图像加载完成，因为这会在用户点击 li 时留下一种延迟，可能会让他们感到困惑。我宁愿在数据-img加载时显示 div.single，然后显示加载器。 - user1937021

div.single 里面有任何东西吗？你想把 throbber（gif 动画）放在哪里展示？它在 <li> 里面，你需要立刻隐藏它。 - Explosion Pills

抱歉，是的，最后一个div应该已经关闭了，请再次检查代码，img位于div.single内。我想在div.single中显示加载gif，即将div.single img的src设置为loader gif。 - user1937021

@user1937021 你不能同时做那个和加载图片，但是你可以将throbber图片附加到.single上（这样你就有两张图片了）。 - Explosion Pills

请检查我在编辑的原始帖子中使用的JavaScript代码，它可以起到一定的作用，但却获取了data-thumb而不是loader gif。 - user1937021