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);
});

但它不起作用。显然它甚至没有被调用（我使用谷歌Chrome的开发者工具设置断点）。

那么有人可以告诉我如何编码吗？

Answer 1

也许这会有所帮助

$（document）.ready（）仅在页面文档对象模型（DOM）准备就绪后才会运行。

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

$（window）.on（＆＃34; load＆＃34;，function（）{...}）将在整个页面运行一次（图像或iframe），而不仅仅是DOM，已准备就绪。

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

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

我如何使用imagesLoaded？

1 个答案: