LazyLoadとは、scriptタグに定義することでグリッドなどで画像を大量に含んでいるページをその画像が位置している場所までスクロール
したところで初めて読み込むよう制御することができる便利なライブラリです。
画像を多用するサイトでは、よくjavascriptやcssを圧縮して読み込ませていますがそれでもまだ遅い若しくは画像が出てこないなど
難儀な問題が多く降りかかってきます。しかも数十枚の画像を一気に読み込むことでページがフリーズして動かなくなったりして
最悪そのページから離脱してしまうユーザーも少なからず存在します。サーバーにとっても多量の画像を送ることは多大な負担につながる
のでこのままではサーバーもユーザーも誰も得をしない宙ぶらりんな状態になってしまいますね。
LazyLoadライブラリは、ページスクロールをしてレイアウト上の範囲のみ画像を送るように命令することで余計な画像を読み込まずに
容量を確保することができるので上手く使うことができればページ速度の改善に大きく貢献してくれそうです。
自分は実装する前はnpmから取ってくるのかなとか実装するの大変そうとかめんどくさいイメージが纏わりついていましたが
とても簡単だったのでさくっと実装することができました。
とりあえずgithubからライブラリを入手。緑色のボタンを押してクローンをしてください。
jquery_lazyload-master.zipというファイルがダウンロードできたと思います。この中にあるjquery_lazyload-masterというフォルダの中に
lazyload.jsとlazyload.min.jsというファイルが入っていると思いますがそこはどっちを使ってもいいみたいです。
自分は無難にlazyload.jsファイルにしました。JQueryと一緒にheadタグの間に埋め込みます。JQueryはバージョン2以上が望ましいです。
<span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"./lazyload.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
これでLazyLoadを使うことができます。コード量が少ないので実装も楽々できました。とるあえずjavascriptでは実装することはできたの
ですがこれをreactと組み合わせたらもっと負担減らせるのにな~と考えております。
そもそもreactではほとんどのオブジェクトをpropとstateで扱うので出番はあるのかなと思っていますが実装することができれば
ネイティブにも遅れをとらない軽量アプリの開発できるのでぜひとも取り込む技術は取得しておきたいものです。