javascript - 如何定义javascript执行顺序

Question

我的网页webpage link使用 3 个 javascript。 TabSlideOut 脚本、SmoothDivScroll 脚本和 TN3 图像库脚本。

当页面第一次加载或重新加载时，TN3 图像库的脚本会运行一段时间，因为必须加载许多图像，这需要时间。

在此期间，SmoothDivScroll 的脚本等待并且仅在 TN3 图像库的脚本完成时执行。由于 SmoothDivScroll 脚本的图像一个接一个地显示，而不是像执行 SmoothDivScroll 脚本时那样平滑滚动，因此页面在此期间看起来非常难看。您可以在重新加载页面时看到这一点。

我想要实现的是首先执行 SmoothDivScroll 的脚本，然后才执行 TN3 Image Gallery 的脚本。或者任何其他可以阻止网页在重新加载时看起来不好看的东西。

我不是一个非常有经验的 web 实现者，我也没有 javascript 编程知识。我尝试了两天以找到解决方案，但我很挣扎。我希望有人可以帮助解决我的问题。谢谢

Answer 1

我将称之为 FOUC 问题；例如，“无样式内容的闪现”。很常见。自 1900 年代末以来就存在，Safari 就因此而臭名昭著。

简短回答:最初使用内联样式在您的元素上设置visibility:hidden。然后在它们加载后使用 JavaScript 设置 visibility:visible。

通常，解决方案是在内容加载之前隐藏内容，然后在准备就绪时显示它。通常在加载内容时，您会显示某种微调器。

从技术上讲，有很多方法可以做到这一点。您可以切换 CSS display、visible 和/或 opacity 设置。您可以显示一个具有高 z-index 的覆盖 div——我用 id="veil" 称之为“面纱”——然后在内容出现时将其删除加载，并使用微调器作为面纱。您还可以将内容完全移出屏幕，直到它们加载完毕，然后再将它们移动到位。您可以结合使用这些方法。

就我个人而言，CSS visibility 属性在跨浏览器和跨设备方面取得了最大的成功。我喜欢它如何为布局中的对象保留空间。其他解决方案有时会在移动设备和一些较旧的浏览器上出现问题。这里有几个片段可以帮助您入门。

首先，使用内联样式将可见性设置为无。
- 免责声明:我不喜欢内联样式，并且了解关注点分离的概念。在这种情况下，我认为这是必要的，因为这必须具有最高的级联优先级，尽快应用，并且我在跨环境方面取得了很好的成功。纯粹主义者会争辩说这应该放在 CSS 文件中，但我认为我们不应该教条地遵循任何指南；有时我们必须有勇气在有充分理由的情况下打破常规。让读者决定。

<div id="pan-content" class="clearfix" style="visibility:hidden">

然后，在页面加载时(使用 jQuery):

$('#window').load( function() {
    $('#pan-content').css({visibility:'visible'});
});

这可能会有点慢，因为您要等到整个窗口加载完毕才能显示横幅。您还可以将事件附加到特定资源，这将加快处理速度。请参阅以下帖子:
Detect image load

希望这对您有所帮助!