在图像加载完成之前,JQuery'fadeIn'发射得太快了

Question

我正在给我朋友的投资组合网站(使用wordpress)进行最后的触摸,但我遇到了一个简单的JQuery页面过渡淡入效果的问题.

这是该网站的链接:( 警告:NSFW) http://www.alexdebrabant.com/front/

在"PROJECTS"部分中,我使用Jquery循环创建一个幻灯片,其中包含帖子中的所有图片.它工作得很好.但在"PORTRAITS"部分,情况有点不同,因为每个帖子只有一张图片.因此,PREV NEXT按钮将访问者带到新帖子,因此每次都必须加载新页面.我的想法是尝试使用某种淡入淡出过渡模仿"PROJECTS"部分的幻灯片.目前,我只有一个非常基本的淡入淡出效果.我的问题是,除非图像被缓存,否则fadeIn效果会在图像加载完成之前过快触发.

我是JQuery的新手,我怀疑必须有一个简单的解决方案,但我似乎无法找到它.

此外,如果你们中任何人知道Jquery效果可以更好地模仿/复制"PROJECTS"部分的幻灯片,那也很棒.可能是页面交叉淡入淡出效果(如果存在)或淡出/淡出可能.

任何帮助将不胜感激.

这是代码:

<!-- contentload -->
<script type="text/javascript">
$(document).ready(function(){

    $('#content').fadeIn(500);

});
</script>
<!-- contentload -->

<style>
#content {display: none;}
</style>

干杯!

托姆

Answer 1

使用$(window).load()或$('img').load()代替$(document).ready().整点的document.ready是,它激发当DOM准备查询,不能当整个页面加载.