requestIdleCallback を使ってリソースを読み込ませる

1. このページの目的

requestIdleCallback を使って、Google Tag Manager のタグを読み込んでみる。

2. コード

HTML

<script class="lazyload" data-src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>

JavaScript

window.addEventListener("load", (event) => {

  const processPendingAnalyticsEvents = (deadline) => {
    // script タグを読み込ませる
    document.querySelectorAll('script.lazyload[data-src]').forEach(e => {
      e.src = e.getAttribute('data-src');
      e.removeAttribute('data-src');
    });
  };
  // コールバック関数を渡す(アイドル時に実行してくれる)
  requestIdleCallback(processPendingAnalyticsEvents);
  //requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });

});

3. 結果

4. 考察

[1] ユーザー・インタラクションをトリガーとして .css / .js を読み込む

5. 参考