どうやってwindowのロードイベントが触発されたか分かりますか?

背景
ページの読み込みを速くするために、重要ではない第三者のスクリプトをページの読み込みが完了した後に怠惰にロードします.

//            
window.addEventListener('load', () => {
  //        
  loadScript({
    url: 'https://www.domain.com/test.js',
    timeout: 10000
  }).then(() => {
    console.log('ok');
  }).catch(console.error);
  //   
  // ...
});

loadイベントは一回だけトリガされるので、怠惰ローディング(load)のシナリオに怠惰ローディングのスクリプトがあると、埋め込まれたスクリプトがトリガできなくなります.

//            
window.addEventListener('load', () => {
  window.addEventListener('load', () => {
    //      
    console.log('   ');
  });
});

ソリューション
HTML document.readyState属性は、現在のページのロード状態を反映することができる.

uninitialized-Has not started loading yet

loading-Is loading

loaded-Has been loaded

interactive-Has loaded enough and the user can interact with it

complete-Flyloaded

属性がcompleteである場合、現在のページは既にロードされていると考えられます.

/**
 *     
 * @param timeout {Number}      /   ： 
 * @return {Promise} 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 DOM readyState Property What is the non-jQuery equivalent of'(document).ready()'？ Performanctiming.loadEventEnd Window:ロードイベント
著作権声明
このブログのすべてのオリジナル文章は著作権を保持しています.転載は、本明細書の完全性を維持し、著者後除と本明細書の元の住所をハイパーリンク形式で明記しなければならない.