如何使用imagesloaded?

加载(新)图像后,我试图在创建的网页上触发操作。页面基本上会显示一个缩略图列表,每当用户单击缩略图时,页面上就会显示相应的较大图像。我想淡出以前的图像,淡入新的图像。

我第一次尝试的是:

<div class="image-area" id="image-area">
  <img id="image-object" src="images/p01.jpg" width="auto" height="auto">
</div>

function SetImageFromSrc (s) {
  var imgArea = $("#image-area"); // the enclosing div
  var imgElem = $("#image-object"); // the img
  $.when (imgArea.fadeTo (imageFadeTime, 0)).done (function () {
    imgElem.attr ('src', s);
    imgElem.load (function() {
      imgArea.fadeTo (imageFadeTime, 1);
    });
  });
}

现在我知道jquery.load()并不总是有效,对我也不适用。在我的例子中,当图像不在浏览器缓存中时,它看起来甚至不起作用。

所以我尝试了imagesloaded,但是我不知道如何将它用于单个图像,以及如何等待该图像加载完毕,然后执行该操作(淡入包含图像的div)。我尝试的代码如下:

$('#image-area').imagesLoaded (function () {
  $(this).fadeTo (imageFadeTime, 1);
});

但没用。显然它甚至都没有被调用(我在里面用google chrome的开发工具设置了一个断点)。

有人能告诉我怎么编码吗?