2

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

我正在开发一个图形密集型网站（它是一个摄影网站），这会导致页面加载缓慢。最大的延迟是投资组合缩略图，通常被 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 在这里。我希望看到的愿景是显示背景和加载图形，然后slideDown()是徽标，然后是fadeIn()相框，移除加载图形，淡入相框内容，然后在向下滑动时淡入底部导航菜单左侧导航菜单。

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

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

4

1 回答 1

1

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

例如：

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

您可以在此处找到该实现的工作示例。

于 2013-07-13T20:46:36.387 回答