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

1. このページの目的

インタラクションをトリガーとして .css / .js を読み込む JavaScript コードを用意し、実際に本ページで動作させる

2. 作成したもの

ユーザー・インタラクションをトリガーとして .css ファイルと .js ファイルを読み込む JavaScript コード (lazyload-css-js.js) を作成した。

(1) .css ファイルを遅延読み込みする

特定の .cssファイルを遅延読み込みするには、class属性に lazyload という値を指定し、href 属性を data-href 属性に書き換えておく。更に、rel="stylesheet" ではなく rel="help" にしておくと、そのページを W3C CSS 検証サービス で検証してもエラーにならない。

(2) .js ファイルを遅延読み込みする

特定の .jsファイルを遅延読み込みするには、class属性に lazyload という値を指定し、src 属性を data-src 属性に書き換えておく。

3. ソースコード

HTML

<link rel="help" class="lazyload" data-href="main.css">

<script data-src="main.js" class="lazyload"></script>

lazyload-css-js.js

(() => {
  let loaded = false;
  const events = ['scroll', 'mousemove', 'mousedown', 'touchstart', 'keydown'];
  const load = () => {
    document.querySelectorAll('script.lazyload[data-src]').forEach(e => {
      e.src = e.getAttribute('data-src');
      e.removeAttribute('data-src');
    });
    document.querySelectorAll('link.lazyload[data-href]').forEach(e => {
      e.href = e.getAttribute('data-href');
      e.removeAttribute('data-href');
      e.as = 'style';
      e.rel = 'preload';
      e.onload = function() { this.rel = 'stylesheet'; };
    });
  };
  const removeEventListeners = () => {
    events.forEach(k => window.removeEventListener(k, listener));
  };
  const listener = () => {
    if (loaded) return;
    loaded = true;
    removeEventListeners();
    load();
  };

  events.forEach(k => window.addEventListener(k, listener));
  setTimeout(() => listener(), 3000);
})();

4. デモ

lazyload-css-js.js を利用して遅延読み込みした main.css と main.js により、以下の背景色を変え文字列をセットしている。

5. メモ

6. 参考