画像の遅延読み込みを行うJavaScriptライブラリ[Layzr.js]を紹介します。 ウェブページの読み込み時間短縮のために、ウィンドウの表示領域に入っていない要素や画像を非表示にしておいて、画面スクロールでウィンドウ内に入ってきたタイミングで表示切り替えを行います。 同機能のjQueryライブラリでは[Lazy Load]が有名ですが、今回紹介する[Layzr.js]ではローディングの時間短縮に直接は関係のないフェードイン表示機能などはカットして、最低限の機能だけを残してファイルサイズをより小さくしています。 より軽く、より早く。 遅延読み込みの本来の役割を重視した仕様になっています。 比較的簡単なステップで導入可能です。 ファイルのダウンロード まずは公式サイトからJavaScriptファイルをダウンロードします。 Layzr.js : http://callmecavs.gith
![【JavaScript】画像の遅延読み込みを行うライブラリ[Layzr.js]の使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/619ea591ff08f5018e9705d3d2b2772600509cc6/height=288;version=1;width=512/https%3A%2F%2Fon-ze.com%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-2022%2Finc%2Fthumbnail%2F600x360x80-9ba6cca3e6aff99506726b2a7bd0d9af-thumbnail.png)