jquery在加载时对单个元素的淡入淡出效果

Question

首先，我不是网页设计师，我只是想帮助朋友的极客。

我正在开发一个图形密集型网站（它是一个摄影网站），这会导致页面加载缓慢。最大的延迟是投资组合缩略图，通常被 jquery 滑块隐藏。因为页面在完成加载之前可能显示不正确（看起来很俗气），我实现了一个加载图形，它在$(window).load() 上消失了。但因为这会等待所有图形加载，所以加载的图形在显示页面之前可能会旋转 10 秒或更长时间（取决于带宽）。

我想要做的是在加载时显示带有漂亮 jquery 效果的单个元素。这样，观看者可以立即开始看到内容，而且看起来仍然很漂亮。

所以我将一些元素设置为display:none，然后在页面末尾调用fadeIn() 和/或slideDown() 函数。这行得通，但有时fadeIn() 函数会在图形完全加载之前运行，因此它们似乎仍然会弹出。但如果我尝试将fadeIn() 函数包装在('#element').load() 中，它就不起作用。我可以将所有淡入淡出效果放在window.load() 中，这看起来很漂亮，但这违背了目的，因为它仍在等待所有这些缩略图。

或者，是否有办法从window.load() 事件中排除某些图像？或者在window.load() 之后动态添加缩略图库？现在页面是相当静态的，只有一些漂亮的 jquery 滑块和一个灯箱。

我使用的是来自 Google 的 jQuery 1.9.1。如果有其他或更好的方法可以使页面呈现漂亮，我会全力以赴。

测试站点 URL 是 here 。我希望看到的愿景是显示背景和加载图形，然后是slideDown() 徽标，然后是fadeIn() 相框，移除加载图形，淡入相框内容，然后淡入底部导航菜单，同时向下滑动左侧导航菜单。

（编辑）
这是我正在尝试解决的问题的更详细描述。如果整个页面加载需要 10 秒：
@1 秒我的所有文本内容都以块状显示，看起来像是 1995 年设计不佳的 8 年级课程项目。
@2-5 秒 document.ready() 触发，滑块脚本完成对页面的解析，并将文本内容容器元素以一种非常跳跃和丑陋的方式移动到位。现在布局看起来不错。
@10 秒缩略图终于完成加载，window.load() 触发。

我当前的解决方法是在滑块脚本完成后开始淡入容器元素，但其中一些元素可能尚未完成加载，因此它们有时会弹出而不是淡入。

Answer 1

您的问题归结为检查每个 img 是否加载，然后 fadeIn 相应的元素，而不是一次全部完成。

例如：

$("img").load(function() {
   $(this).fadeIn(1000);
}).each(function() {
   if(this.complete) $(this).load();
});

您可以找到该实现的工作示例HERE。