Material Design Lite(MDL)は画像その他のリソースの有無をチェックし、存在しないときは非参照の表示が表に出ないよう調整します。そもそもこの機能がありがたいかは議論の分かれるところだと思うのですが(指定ミスに気づかない可能性が高まりますし)、対象のひとつである iframe 要素では別の問題も生じます。読みこみが二回発生してしまうのです。iframe 要素の参照先は比較的重いコンテンツになるので、これはありがたくない動作です。本来なら MDL が解決の方策を用意すべきだと思うのですが、残念ながら v1.3.0 の時点ではそうなっていません。
この現象は遅延読みこみライブラリの利用で解消できます。しかし MDL での遅延読みこみライブラリの利用には別の課題があり、一般的なライブラリはそのままでは使えません。というのも、MDL はレイアウトを調整する際 body 要素の子要素にmdl-layout__containerクラスを指定した div 要素を追加するなどして DOM を再構成し、body 要素ではスクロールが発生しないようにするからです。
これらを考慮して MDL で iframe 要素の遅延読みこみを実現するには次の JavaScript コードを用います。遅延読みこみライブラリには、他のライブラリに依存しないecho.jsを利用します。
var initialized = false;
document.addEventListener('mdl-componentupgraded', function() {
if (initialized === false) {
echo.init();
document.getElementsByClassName('mdl-layout')[0].addEventListener('scroll', function() {
echo.render();
});
initialized = true;
}
});
mdl-componentupgradedは MDL 固有のイベントで、MDL のコンポーネントが調整されるたびに発行されます。遅延読みこみの設定は一回で充分なのでinitialized変数で二回目以降は初期化を実行しないようにします。初期化自体は echo.js の通常のそれ(オプション指定はお好みで)に加え、MDL でスクロールイベントが発生する要素への描画ハンドラ追加を行います。これで iframe 要素他の echo.js の対象とする要素の参照は最適化されます。お試しあれ。
なお MDL の予定されていた v2 はMaterial Components for the web(MDC-Web)に衣替えだそうで、こちらはまだ安定には程遠い模様……