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准备好进行查询时触发，不是在整个页面加载时触发。

Answer 2

尝试使用jQuery load代替document.ready

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

2 个答案: