justlazy.jsは画像の遅延読み込みを実装することができるJavaScriptプラグインです。ファイル容量も軽量で、jQueryに依存することなく使用可能なところがうれしいですね。Webページの読み込み速度を少しでも短縮させたい人にはとても便利な機能といえます。
justlazy.js
justlazy.jsの実際のデモや具体的な実装方法は以下のページから確認できます。
デモでは画像以外のコンテンツが先に読み込まれた状態になっていて、画像が表示される場所にはローディングアイコンが表示されています。画像が読み込まれるとローディングアイコンがある位置に画像が表示されます。
先にテキストなどのコンテンツが読み込まれるので、重い画像を読み込んでいる間でもユーザーを無駄に長い時間待たせなくて済むのがいいですね。
画像が読み込まれるまでテキストなどを読み進めることができるので、とても効率的です。
使い方も簡単で、画像を設置するHTMLの要素には属性を指定することができます。属性には、data-src、data-alt、data-title、data-srcsetが用意されています。
また、オプションにはonloadCallback、onerrorCallback、onreplaceCallback、thresholdといった項目のセッティングが可能です。
というわけで、画像の遅延読み込み機能を実装できる軽量のJSプラグイン「justlazy.js」の紹介でした。justlazy.jsの詳細やダウンロードは、以下のページからどうぞ。
