JavaScriptのコンテンツの遅延読み込み

a-blog cmsでは、JavaScriptなどのコンテンツが表示領域に入った瞬間に読み込み、遅延ロードするための機能が用意されています。（Ver. 2.11.0より）

HTML要素に本来指定すべき属性をdata属性として指定しておき、表示領域に入ったら data- の接頭辞をはずして本来の属性として遅延ロードさせる組み込みJSです。 利用することによって、外部の埋め込みコードによるページの表示速度の問題を改善することができます。

例えば、以下のようなコードがあったとします。

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8"></div>

これが、表示領域に入ると、以下に変更されます。

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8" data-executed="1">
  <script src="http://example.com/example.js" charset="utf-8"></script>
</div>

このように、data-type 属性がタグ名として、残りのdata属性はdata-を除いた属性として新たに挿入されます。

例えばTwitterウィジェットなどのコンテンツはパフォーマンスに大きく影響するので、以下のようなHTMLで遅延ロードします。

<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a>
<div data-type="script" data-src="https://platform.twitter.com/widgets.js" data-charset="utf-8" class="js-lazy-contents">

使い方

js-lazy-contents というclass属性を適用し、data-type 属性に追加したいHTML要素、 data-* 属性に、dataを取り除いた属性を指定（ data-src 属性の場合は src 属性）します。

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8"></div>

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。

lazyContentsMark: '.js-lazy-contents',

設定のカスタマイズ

config.jsのデフォルトの設定から設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成し以下のように記述してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

ACMS.Ready(function(){
  lazyLoadMark = '.js-lazy-contents',
});

---