javascript - 页面加载时的插件和 html - 元素遍布各处的瞬间

Question

多年来我一直在制作网站，但仍然没有找到可靠的方法。当用户访问网站时使用诸如 fullpage.js 之类的插件时，内容无处不在，直到 css 已加载，然后插件会按应有的方式重新排序。例如网站 http://thisisdk.com使用整页并且有一个非常沉重的页面，其中包含大量视频，但从一开始它就可以无缝加载。我知道他们有一个加载器，但有些东西告诉我除了 cdns 等之外还有很多其他非常聪明的东西。有兴趣听听其他开发人员的技巧和技巧，了解他们如何在不使用预加载器的情况下克服这个问题

Answer 1

我总是建议人们在标题中使用 load fullPage.js，这与在正文中添加 JS 文件的流行趋势相反。

为什么？

因为我认为 fullPage.js 对于网站的正确可视化至关重要。如果没有 fullpage.js，您的部分将不会有正确的大小，它们会像您提到的那样重叠，幻灯片内容在不应该显示的时候会显示...

其中一些需要 fullpage.js 才能运行、检测内容的尺寸、将幻灯片设置到正确的位置等。

您可以在 the demo pages 中的任何一个中查看此内容由 fullPage.js 提供，您会看到没有这样的闪烁。

如果您仍然不想使用此解决方案来加快您网站的加载速度。，我建议您使用关键的 CSS 技术来设置您的部分的大小尽可能快(即使 fullpage.js 尚未初始化)并且没有任何 HTTP 请求(以加快速度)

在您网站的 header 中使用以下内联样式:

<style>
    html,body {
        margin: 0;
        padding: 0;
        overflow:hidden;
    }

    .section,
    .slide,
    .fp-tableCell{
        height: 100vh;
    }
</style>

这将解决闪烁部分的问题。

一些可能出现的问题

• 如果您正在使用 fullpage.js 的条件初始化，即使您不需要它，它仍会应用。

• 如果您动态销毁 fullpage.js，它仍会在您不需要时应用。

• 在加载和初始化插件之前，内容大于视口(viewport)的部分不会有滚动条。

• 即使您不希望通过在某些幻灯片中使用 setAllowScrolling(false)，用户也可以访问幻灯片。