Bootstrap Javascript延迟加载后,如何触发它的initCallback函数?
After lazy loading the Bootstrap Javascript, how to trigger it's initCallback function?
由于 Bootstrap-native javascript 不是 直接 必需的,因为只有当用户开始与页面交互时才真正需要它,我图我可以延迟加载它。 (是的,它只有几 KB,但嘿,如果可能的话,为什么不呢?)
小问题是 bootstrap 脚本会在 DOMContentLoaded 事件上触发它的初始化函数 initCallback()。我相信,此函数将在 HTML 中查找数据标签并关联适当的 events/triggers。由于它是延迟加载的,DOMContentLoaded 在下载 bootstrap.js 之前触发,因此它缺少此事件并且不会初始化。
我只是Javascript的一个爱好者;我似乎无法弄清楚如何在 fetch() (实际上是使用我在网上找到的一个名为 fetchInject() 的函数)完成脚本下载后手动调用此函数。
也许延迟加载 bootstrap 不是一个好主意;但我想我会在很长的 运行 中解决这个问题;如果我至少让这个工作。
/* 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() 执行,这样 bootstrap 会找到所有 HTML 内联数据挂钩(比如下拉菜单和东西)
您是否尝试过访问全局 bootstrap 命名空间,就像 运行 此代码:
BSN.initCallback();
由于 Bootstrap-native javascript 不是 直接 必需的,因为只有当用户开始与页面交互时才真正需要它,我图我可以延迟加载它。 (是的,它只有几 KB,但嘿,如果可能的话,为什么不呢?)
小问题是 bootstrap 脚本会在 DOMContentLoaded 事件上触发它的初始化函数 initCallback()。我相信,此函数将在 HTML 中查找数据标签并关联适当的 events/triggers。由于它是延迟加载的,DOMContentLoaded 在下载 bootstrap.js 之前触发,因此它缺少此事件并且不会初始化。
我只是Javascript的一个爱好者;我似乎无法弄清楚如何在 fetch() (实际上是使用我在网上找到的一个名为 fetchInject() 的函数)完成脚本下载后手动调用此函数。
也许延迟加载 bootstrap 不是一个好主意;但我想我会在很长的 运行 中解决这个问题;如果我至少让这个工作。
/* 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() 执行,这样 bootstrap 会找到所有 HTML 内联数据挂钩(比如下拉菜单和东西)
您是否尝试过访问全局 bootstrap 命名空间,就像 运行 此代码:
BSN.initCallback();