ウィンドウのロードイベントがトリガーされたことを知る方法

バックグラウンド

ページの読み込みを高速化するために、重要でないサードパーティのスクリプトは、ページの読み込み後に遅延読み込みされることがよくあります。

// 做一些不影响业务的事情
window.addEventListener('load', () => {
  // 懒加载埋点分析
  loadScript({
    url: 'https://www.domain.com/test.js',
    timeout: 10000
  }).then(() => {
    console.log('ok');
  }).catch(console.error);
  // 其他
  // ...
});

loadイベントは1回だけトリガーされるため、load別の遅延読み込み（スクリプトスクリプト）で遅延読み込みを行うと、埋め込みスクリプトをトリガーできなくなります。

// 做一些不影响业务的事情
window.addEventListener('load', () => {
  window.addEventListener('load', () => {
    // 不能执行了
    console.log('我无了');
  });
});

解決

HTMLdocument.readyState属性では、現在のページのリアクティブロードステータスにすることができます。

• uninitialized -まだ読み込みを開始していません
• loading -読み込んでいます
• loaded -ロードされました
• interactive -十分に読み込まれ、ユーザーはそれを操作できます
• complete -フルロード

プロパティcompleteが考慮できる場合は、現在のページの読み込みが完了しています。

/**
 * 加载完成
 * @param timeout {Number} 超时时间 / 单位：秒
 * @return {Promise<Boolean>} document is loaded? 
*/
function windowLoaded(timeout = 90) {
    let loaded, loadFail;
    const status = new Promise((resolve, reject) => {
        loaded = resolve;
        loadFail = reject;
    });
    if (document.readyState === 'complete') {
        loaded('complete');
    } else {
        window.addEventListener('load', () => loaded('load'));
    }
    // 超过 timeout 秒后加载失败
    setTimeout(() => loadFail('timeout'), timeout * 1000);
    return status;
}

// load
windowLoaded()
  .then(res => {
    console.log(res);
  })
  .catch(console.error);

参照

HTML DOMreadyStateプロパティ
'$（document）.ready（）'に相当するjQuery以外のプロパティは何ですか？
PerformanceTiming.loadEventEnd
ウィンドウ：ロードイベント

著作権表示

このブログのすべての元の記事、著者は著作権を留保します。複製にはこのステートメントを含め、記事をそのままにしておく必要があります。ハイパーリンクの形式は、追加後の著者と元の記事のアドレスを示します。https://blog.mazey.net/1994.html