layzr.js を使って iframe を遅延読み込みする
最近は自分専用のツールを集約したアプリを作っていたりします。
自分で作るよりも、どこかのサイトのツールを取り込んでしまったほうが早い場合があるのでそういう場合は iframe をつかって取り込んでいます、ですがiframeがあると非同期処理されないので読み込みが重くなったりします、そこで layzr.js を使った iframe の遅延読み込みの方法が便利だったので紹介致します。
layzr.js で iframe を遅延読み込みする
layzr.js は MITライセンスのプラグインです、jQueryに依存せずにネイテイブjavascriptで利用できるプラグインとなっており軽量高速に動作します。
layzr.js を使おうと思ってハマった点もあったのでその点を踏まえて紹介致します。
STEP1 layzr.js をダウンロードする
まずは、プラグインのダウンロードですが GitHubにて公開されていますのでそちらよりダウンロードするのですが、注意点があり 現在の最新バージョンにはなぜか プラグインが含まれていないという謎の事件が発生しています。
現在は最新は v2.2.2 です
ファイル構成は
- example
- src
- test
- .babelrc
- .eslintrc
- .gitignore
- .npmignore
- .CONTRIBUTING.md
- README.md
- package.json
- rollup.config.js
となっています、srcに layzr.js があるのですが、コレを使っても正しく動作しません。中身を覗いたら knot.js を import しようとしてたりしてて中身が違うようで、testのhtmlで指定しているファイルがなかったりしてこれでは使えない状態でした。
なので一つ前のバージョン v2.2.1 をダウンロードすると v2.2.2には無い dist というフォルダがあるので、そこにある layzr.min.js を使うと正しく動作します。
もしくは、CDNが用意されているので そちらを読み込むとちゃんと動きます、そちらのCDNで配信されているものを保存して利用しても良いでしょう。
v2.2.1 のダウンロードはこちら → layzr.js v2.2.1
CDN はこちら → https://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js
プラグインの公式サイトはこちら → http://callmecavs.com/layzr.js/
これで プラグインの準備は出来ましたね、次はプラグインを読み込んで利用する方法です。
Layzr.js を使う
まずは iframe が普通に読み込みを開始しないように少し変更を加えます、通常では src で指定したファイルやurlを iframe で開きますので src を data-layzr に置き換えてそちらにパスを入れます。
通常のiframe <iframe src="http://fontawesome.io/cheatsheet/" frameborder="0"></iframe> 置き換えたiframe <iframe data-layzr="http://fontawesome.io/cheatsheet/" frameborder="0"></iframe>
これで置き換えた iframe は layzr.js を実行しない限り何も表示されないようになりました。
次に、iframe を layzr.js で遅延実行できるように layzr.js の読み込みと実行を行います。実行はHTMLが全て読み込まれたあとに実行させるようにしないと、iframe と layzr.js の位置関係でうまく動作しない場合があります。
<script src="js/layzr.min.js"></script>
<script>
window.addEventListener('load', function () {
var layzr = new Layzr();
}, false);
</script>
これで、プラグインの読み込みと実行を行います。
今回は iframe に重点を絞って紹介しましたが 画像でも行うことが出来ます
githubの方にいろいろな他にも使えるオプションとかも載っていますので詳しくはそちらでチェックしてみてくだい。
リンク
COMMENT