每个图像成功加载后回调单个图像？

Question

如何检测图像是否预先加载，然后执行回调动画以淡入图像？

我的网站上散布了10张图片，我已经简化了下面的html，例如：

<header>
    <img src="headerImage.jpg" />
</header>
<div class="content">
    <img src="contentImage.jpg" />
</div>
<footer>
    <img src="mylogo.jpg" />
    copyright 2014 mywebsite.com
</footer>

在我的CSS中，我默认将所有图像的不透明度设置为0：

<style>
    img{opacity:0;}
</style>

淡入我使用的图像：

$("img").animate({'opacity':1 },600);

现在我遇到的问题是所有图像都会淡入，无论是否一次性加载。有没有办法在加载之后检测个人图片，然后只有淡入/触发动画回调？

Answer 1

您可以使用load event

  

当加载事件和所有子元素已完全加载时，会将事件发送到元素。

代码的

$('img').load(function(){
    $(this).animate({'opacity':1 },600);
});

DEMO

  

一旦加载了图像，就会调用处理程序。