網頁加載時的插件和html-元素遍地都是秒

Question

我從事網站工作已有多年，但仍未找到可靠地進行此操作的方法。 當用戶訪問站點時使用例如fullpage.js之類的插件時，內容一直到處都是，直到CSS加載完畢，插件再按原樣重新排序。 例如，網站http://thisisdk.com使用整頁，並且頁面非常繁重，其中包含很多視頻，但是從一開始它就可以無縫加載。 我知道他們有一個加載程序，但是有什么告訴我，除了CDN等，還有很多其他非常聰明的東西。有興趣聽到其他開發人員的技巧和竅門，他們如何不使用預加載程序來克服這個問題

Answer 1

我總是建議人們在標頭中使用load fullPage.js，這與在主體中添加JS文件的流行趨勢相反。

為什么？

因為我認為fullPage.js對於正確可視化網站至關重要。 沒有fullpage.js，您的版塊大小將不正確，正如您提到的那樣，它們將重疊，幻燈片內容在不應該顯示的情況下可見...

其中一些操作需要fullpage.js運行，檢測內容的尺寸，將幻燈片設置在正確的位置等。

您可以在fullPage.js提供的任何演示頁面中進行檢查，並且不會出現此類閃爍。

如果您仍然不希望采用這種解決方案來加快網站的加載速度。 ，我建議您使用關鍵的CSS技術來盡可能快地設置部分的大小（即使在未初始化fullpage.js的情況下），也不要設置任何HTTP請求（以加快處理速度）

在網站標題中使用以下內聯樣式：

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

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

這將解決閃爍部分的問題。

一些可能的問題

• 如果您正在使用fullpage.js的條件初始化，那么即使您不需要它，它也仍然會應用。

• 如果您動態銷毀fullpage.js，則在不需要時仍會應用它。

• 在加載並初始化插件之前，內容大於視口的部分將不會具有滾動條。

• 即使您不希望使用某些幻燈片中的setAllowScrolling(false) ，也可以使用setAllowScrolling(false)幻燈片。