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。如果有另一种或更好的方法使页面渲染漂亮，我会全力以赴。

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

（编辑）
这里是我正在尝试解决的问题的更详细的描述。如果整个页面加载需要10秒钟：
@ 1秒我的所有文字内容都以块状显示，看起来像是一个设计糟糕的8年级班级项目，从1995年开始。
@ 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。

jquery在加载时淡化对单个元素的影响

1 个答案: