comments簡単に画像を遅延表示できる軽量Jsライブラリ【Echo.js】Pocket大きな画像を表示する際、何も処理をしないとすべての画像が表示されるまで、時間がかかります。そこで役立つのが画像を読み込むタイミングを遅らせることですが、自分でゼロからスクリプトを組むとなるとなかなか大変ですが、簡単にしかも!超軽量なJavaScriptライブラリの紹介です。今回試してみたJavaScriptライブラリはJqueryにも依存せず、難しいプログラムも要らず、何よりも1KBと超軽量なので、スマートフォン向けのサイトなどでも安心して使うことが出来ます。スクロールに応じて表示できるので、縦に長いページやランディングページなんかにも使えると思います。個々最近のGoogleの検索アルゴリズムのアップデートで、ページの表示速度もページランクに影響すると明言しているようなので、SEOの意味でも表示ストレスのないページを作る際に活用したいJsです。Echo.jsの使い方まずは、こちらからライブラリをダウンロード。</body>直前に読み込み。難しい記述は必要なく、srcでローディングの画像や空の画像を読み込み、data-echoで表示する画像を設定するだけです。これだけで遅延表示の完了。使えるオプション※中学生以下の英語力で訳したので、詳しくはGithubのページでご確認下さい。デフォルト:0ページがどこまでスクロールされたら表示するかの設定。0の場合は、表示領域内に入ったらすぐに表示。デフォルト:250同時に画像が読み込まれないように時間差を設定。画像1と画像2が同時に表示されたら、画像1の250ミリセカンド後に画像2を表示する。サンプルページかなりやっつけな感じになってしまいましたが、実際に使ってみました。まとめ注意点として、jqueryのようにdocument.readyは使えないので、というかdocument.readyしてからだと遅延表示のスクリプトとして本末転倒なので、bodyのとじタグ直前に読み込むこと。これに気づくまでにかなり時間かかりましたwwwやはり、一度は使ってみるべきですね。簡単に画像の遅延表示をしたいという方はぜひお試し下さい。