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

Question

首先，我不是网页设计师，我只是一个试图帮助 friend 的极客。

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

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

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

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

我正在使用来自 Google 的 jQuery 1.9.1。如果有其他或更好的方法使页面呈现漂亮，我洗耳恭听。

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

(编辑)
这是我试图解决的问题的更详细描述。如果整个页面需要 10 秒才能加载:
@1 其次，我的所有文本内容都以 block 形式显示，看起来像是 1995 年设计糟糕的 8 年级类(class)项目。
@2-5 秒 document.ready() 触发， slider 脚本完成页面解析，并将文本内容容器元素以一种非常跳跃和丑陋的方式移动到位。现在布局看起来没问题。
@10 秒缩略图最终完成加载并触发 window.load()。

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

Answer 1

您的问题的哪一部分归结为检查要加载的每个 img，然后fadeIn 相应的元素，而不是一次全部执行。

例如:

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

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