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

Question

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

Answer 1

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

为什么？

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

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

您可以在 fullPage.js 提供的任何 the demo pages 中进行检查，您会发现没有这种闪烁。

如果您仍然不想使用此解决方案来加快您网站的加载速度。，我建议您使用关键 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，当你不需要它时，它仍然会被应用。
在插件加载和初始化之前，内容大于视口的部分将不会有滚动条。
即使您不想在某些幻灯片中使用 setAllowScrolling(false)，用户也可以访问幻灯片。

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

Plugins and html on page load - Split second where elements are all over the place

html

javascript

css

jquery

fullpage.js