我有一个页面，我希望我的所有图像在加载后都能淡入，但要分别淡入，并且我使用以下命令可以很好地工作。。。
<style>
img.imgfade {display:none;}
</style>
<script>
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
});
});
</script>
我在这里遇到的问题是，在离开页面导航，然后再次返回后，图像不再存在。这可能是因为它们已经存储在浏览器缓存中，因此在我的javascript运行之前就已经加载了。
我整个下午都在研究这个，但找不到图像分别加载和淡入的替代方案。我发现的一个方法是在.load()中包含.each()函数。每个方法都可以检查图像是否已经完成，如果已经完成，只需手动调用.load(，但当我添加它时，图像甚至第一次都不会加载。
<script>
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
});.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
</script>
解决了：这个问题已经在下面解决了，所以我分享我的完整代码，以防它对其他人有帮助。这将在加载图像时一次淡出一个图像，并且在返回页面时不会受到浏览器缓存图像的影响。
<style>
img.imgfade {display:none;}
</style>
<script>
(function ($) {
$(document).ready(function() {
$('img.imgfade').load(function() {
$(this).fadeIn('slow');
})
.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
})(jQuery);
</script>
});.each(function() {
请尝试删除分号;，否则您的代码将引发语法错误。
还记得为您的each(function()... )添加一个});
所以代码变成
...
})
.each(function() {
if(this.complete) {
jQuery(this).load();
}
});
您可以通过现代CSS3转换和onload属性来实现这一点，例如：
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="this.classList.add('show')">
img {
opacity: 0;
-webkit-transition: 1000ms opacity;
-moz-transition: 1000ms opacity;
-ms-transition: 1000ms opacity;
-0-transition: 1000ms opacity;
transition: 1000ms opacity;
}
img.show {
opacity: 1
}
示例
当然，我在this.classList中使用了香草JS，如果你需要旧的浏览器支持，这可能不适合你
但你总是可以换成jQuery:$(this).addClass('show')
这里有一个使用jQuery执行淡入的示例：
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/10/mountain-4.jpg" onload="$(this).fadeIn(1000)">
img {
display: none;
}