如何使用imagesLoaded？

Question

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

我第一次尝试是这样的：

<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的开发人员工具设置了一个断点)。

所以谁能教我怎么写这个代码？

Answer 1

也许这会有帮助

$( Document ).ready()仅在页面文档对象模型(DOM)准备就绪时运行。

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

加载$(

).on(“load”，function() { ... })将在整个页面(图像或iframe)就绪后运行，而不仅仅是DOM。

$(window).on("load", function() {
    console.log("window loaded");
});

http://learn.jquery.com/using-jquery-core/document-ready/