gpt4 book ai didi

Javascript - 异步加载代码时 window.onload 的替代方案

转载 作者:行者123 更新时间:2023-12-03 23:41:21 25 4
gpt4 key购买 nike

我有一个计算器,我正在集成到我的网站中。通常,当单独在页面上时,计算器会使用以下函数进行初始化

window.onload = function () {

/* Initializes calculator */

}
但是,当用户要求它时,我将这个计算器异步加载到页面上,默认情况下它不在页面上。计算器异步加载到页面后如何初始化?我遇到的问题是 window.onload = function ()当我将计算器异步加载到页面时,初始化计算器不起作用,因为 window.onload事件已经发生。我应该使用什么函数而不是 window.onload当它被异步带到页面时初始化计算器?
// 1. Page loads
// 2. Calculator is brought to page asynchronously
// 3. Code below executes to initialize the calculator

***something else*** = function () {

/* Initializes calculator */

}

最佳答案

更改您的 匿名函数 分配给 onload由此...

window.onload = function() {
// stuff
};
...到 命名函数 直接或间接调用的 based on document.readyState , 像这样:
function initCalculator() {
// stuff
}

if( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', initCalculator );
}
else if( document.readyState === 'interactive' || document.readyState === 'complete' ) {
initCalculator ();
}
  • 如果 <script>是普通(静态)HTML <head> 的一部分并同步加载或使用defer然后 initCalculator函数将在 'DOMContentLoaded' 时运行火灾。
  • 如果 <script>是普通(静态)HTML <head> 的一部分与 async - 或 <script>在页面加载后添加,然后 initCalculator如果异步脚本在 DOMContentLoaded 之后加载,函数将立即运行,或者如果它在 DOMContentLoaded 之前加载然后它将酌情运行。

  • 为了更加安全,您可以使用 dataset 来防止双重初始化。进入 <html> (这比在 window 上添加属性更安全):
    function initCalculator() {
    if( document.documentElement.dataset['calcLoaded'] === 'true' ) return;

    // do stuff

    document.documentElement.dataset['calcLoaded'] = 'true';
    }

    if( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', initCalculator );
    }
    else if( document.readyState === 'interactive' || document.readyState === 'complete' ) {
    initCalculator ();
    }

    关于Javascript - 异步加载代码时 window.onload 的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65526678/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com