Question

为即将推出的Bigcommerce商店开发自定义Stencil主题，并遇到一些问题。我对JS模块加载/ ES6概念比较陌生，但是通过jspm添加了一些额外的JS包（包含在Stencil中）。我遇到的问题是，在完全呈现页面之前，这些新包不起作用。所以，例如，我使用的是一个模式弹出包，animatedModal.js，这是一个jQuery包。它已经安装，它正在工作，但无论我在模块加载器中实例化包，模态内容在隐藏和正常工作之前都会在页面上显示大约2秒。同样适用于jQuery包，mmenu，我用于导航。

这甚至不是FOUC，因为看起来这些插件甚至没有像我说的那样运行，直到页面完全呈现。我希望永远不会看到animatedModal.js正在处理的模态，或者在被mmenu隐藏之前看到渲染的导航。我需要以不同的方式实例化包，因为我们使用的是System.js / Babel / es6-module-loader /等。

目前，一旦安装了软件包，我就会在/ js / theme / global中为特定软件包创建一个js文件，例如，使用animatedModal.js我创建了/js/theme/global/animated-modal.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？它是在HTML模板底部初始化的javascript，因此模块/函数当然不会运行，直到页面呈现到那一点。这意味着您的HTML将在javascript启动之前显示并隐藏它。您需要使用CSS自己隐藏内容。然后js将在它加载后接管。

新增Bigcommerce Stencil JS软件包

1 个答案: