【问题标题】:After lazy loading the Bootstrap Javascript, how to trigger it's initCallback function?延迟加载 Bootstrap Javascript 后,如何触发它的 initCallback 函数?
【发布时间】:2018-12-29 05:37:00
【问题描述】:

由于 Bootstrap-native javascript 不是 直接 必需的,因为它仅在用户开始与页面交互时才真正需要,我想我可以延迟加载它。 (是的,它只有几 KB,但如果可能,为什么不呢?)

小问题是引导脚本会在 DOMContentLoaded 事件上触发它的初始化函数 initCallback()。我相信这个函数会在 HTML 中查找数据标签并关联适当的事件/触发器。由于它是延迟加载的,DOMContentLoaded 在 bootstrap.js 下载之前触发,因此它缺少此事件并且不会初始化。

我只是一个 Javascript 爱好者;而且我似乎无法弄清楚在 fetch() (实际上是使用我在网上找到的一个名为 fetchInject() 的函数)完成脚本下载后如何手动调用此函数。

也许延迟加载引导不是一个好主意;但从长远来看,我想我会弄清楚的;如果我至少让它工作。

  /* Native Javascript for Bootstrap 4 | Initialize Data API
  --------------------------------------------------------*/
  var initializeDataAPI = function( constructor, collection ){
      for (var i=0, l=collection[length]; i<l; i++) {
        new constructor(collection[i]);
      }
    },
    initCallback = BSN.initCallback = function(lookUp){
      lookUp = lookUp || DOC;
      for (var i=0, l=supports[length]; i<l; i++) {
        initializeDataAPI( supports[i][1], lookUp[querySelectorAll] (supports[i][2]) );
      }
    };

  // bulk initialize all components
  DOC[body] ? initCallback() : on( DOC, 'DOMContentLoaded', function(){ initCallback(); } );

initCallback() 执行,以便引导程序将找到所有 HTML 内联数据挂钩(如下拉菜单和东西)

【问题讨论】:

标签: javascript lazy-loading bootstrap-native


【解决方案1】:

您是否尝试过像运行此代码一样访问全局引导命名空间:

BSN.initCallback();

【讨论】:

  • Bootstrap native 将其BSN 对象放入window 对象中(例如:window.BSN),因此您可以在脚本运行后访问它。使用BSN.initCallback()window.BSN.initCallback() 相同。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多