大きな画像を表示する際、何も処理をしないとすべての画像が表示されるまで、時間がかかります。
そこで役立つのが画像を読み込むタイミングを遅らせることですが、自分でゼロからスクリプトを組むとなるとなかなか大変ですが、
簡単にしかも！超軽量なJavaScriptライブラリの紹介です。
今回試してみたJavaScriptライブラリはJqueryにも依存せず、難しいプログラムも要らず、何よりも1KBと超軽量なので、スマートフォン向けのサイトなどでも安心して使うことが出来ます。
スクロールに応じて表示できるので、縦に長いページやランディングページなんかにも使えると思います。
個々最近のGoogleの検索アルゴリズムのアップデートで、ページの表示速度もページランクに影響すると明言しているようなので、SEOの意味でも表示ストレスのないページを作る際に活用したいJsです。
Echo.js
作者ページ
GIthub
https://github.com/toddmotto/echo
Echo.jsの使い方
まずは、こちらからライブラリをダウンロード。
</body>直前に読み込み。
特に難しい記述は必要なく、srcでローディングの画像や空の画像を読み込み、data-echoで表示する画像を設定するだけです。
コーディング
1 | <img src="ローディングの際の代替画像"alt=""data-echo="読み込み後に表示する画像" /> |
1 2 3 4 5 6 7 8 9 | <script src="echo.js"></script> <script> Echo.init({ offset:50, throttle:250 }); </script> </body> </html> |
ちなみに、あとで紹介するサンプルページでは以下のように記入
1 | <img src="loading.gif"alt=""data-echo="pic1.jpg" /> |
これだけで
遅延表示の完了。
使えるオプション
※中学生以下の英語力で訳したので、詳しくはGithubのページでご確認下さい。
offset
タイプ：数字 デフォルト：0
ページがどこまでスクロールされたら表示するかの設定。0の場合は、表示領域内に入ったらすぐに表示。
throttle
タイプ：数字 デフォルト：250
同時に画像が読み込まれないように時間差を設定。単位はミリセカンド。画像１と画像２が同時に表示されたら、画像１の250ミリセカンド後に画像２を表示する。（これ超自信ない・・・）
かなりやっつけな感じになってしまいましたが、実際に使ってみました。
まとめ
注意点として、jqueryのようにdocument.readyは使えないので、というかdocument.readyしてからだと遅延表示のスクリプトとして本末転倒なので、bodyのとじタグ直前に読み込むこと。
これに気づくまでにかなり時間かかりましたｗｗｗ
やはり、一度は使ってみるべきですね。
簡単に画像の遅延表示をしたいという方はぜひお試し下さい。
