Jquery 加载图像时显示加载gif

我有以下列表，当用户单击一个li时，我希望ul.list隐藏并显示div.single，同时将img.data-img src设置为li的数据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 () { 
            });

var preload=$（this.find（'.tip'）.attr（'src'）；
$（'.single-aside img'）.attr（'src'，预加载程序）；
$（'.single-aside-img'）.attr（'src'，url）.load（函数（）{
});

很难判断图像何时加载；您可能只想预加载图像（使用

$（“就足够了”）

你可以依靠
.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();    
   });
});

您好，谢谢，它可以工作，但我希望.list立即隐藏起来，而不是等待图像加载，因为这会在用户单击li时留下一种延迟，这可能会让他们感到困惑。我希望它显示div.single，然后在数据img加载时显示加载程序。
div.single？要在何处显示跳动器（gif）？它在
中，您可以立即隐藏它。很抱歉，是的，最后一个div应该已经关闭，再次检查代码，img在div.single中。我想在div.single中显示加载gif，即将div.single img的src设置为加载gif。@user1937021您不能这样做，但可以同时加载图像d将throbber图像改为
。single
（因此您有两个图像）。检查我在编辑的原始文章中使用的javascript，它在某种程度上可以工作，但它获得的是数据拇指，而不是加载gif。