添加了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将在加载后接管。