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',
});