添加了Bigcommerce Stencil JS程序包加載較晚

Question

為即將到來的Bigcommerce商店開發自定義Stencil主題，並且遇到了一些問題。 我對JS模塊加載/ ES6概念還比較陌生，但是通過jspm（包含在Stencil中）添加了一些其他JS軟件包。 我遇到的問題是，這些新軟件包在頁面完全呈現之前無法發揮作用。 因此，例如，我使用的是模式彈出框，animationModal.js，它是一個jQuery包。 它已安裝，正在運行，但是無論我在模塊加載程序中的哪個位置實例化軟件包，模態內容在隱藏並按預期方式工作之前都會在頁面上顯示約2秒鍾。 jQuery包mmenu也是如此，我正在使用它進行導航。

這甚至不是FOUC，因為正如我所說，這些插件甚至在頁面完全呈現之前都沒有運行。 我希望在mmenu隱藏之前，永遠不會看到animationModal.js正在處理的模式，也不會看到呈現的導航。 由於我們使用的是System.js / Babel / es6-module-loader / etc，我是否需要以不同的方式實例化軟件包？

當前，一旦安裝了軟件包，我就在/ js / theme / global中為特定的軟件包創建一個js文件，例如，使用我創建的/js/theme/global/animated-modal.js的animationModal.js：

import $ from 'jquery';
import 'joaopereirawd/animatedModal.js';

export default function() {
    $("#loginLink").animatedModal();
}

然后，在/js/theme/global.js中，我將此函數/模塊稱為：

import initializeModals from './global/animated-modal';

export default class Global extends PageManager {
    // ...
    loaded(next) {
        initializeModals();
        // ...
    }
}

同樣，這一切都可以正常進行，但是加載頁面所花費的時間很長，所有這些元素在被隱藏和“工作”之前在頁面上顯示大約2秒鍾，例如被隱藏和單擊的模式或在隱藏和可用之前在頁面上顯示的導航。

有任何社區想法嗎？

Answer 1

你為什么說這不是FOUC？ javascript會在HTML模板的底部進行初始化，因此，在頁面呈現到該點之前，模塊/函數當然不會運行。 這意味着您的HTML會像顯示javascript之前一樣顯示和隱藏。 您需要使用CSS自己隱藏內容。 然后，js將在加載后接管。