no-image

JavaScript

画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

justlazy.jsは画像の遅延読み込みを実装することができるJavaScriptプラグインです。ファイル容量も軽量で、jQueryに依存することなく使用可能なところがうれしいですね。Webページの読み込み速度を少しでも短縮させたい人にはとても便利な機能といえます。

justlazy.js

デモ

デモでは画像以外のコンテンツが先に読み込まれた状態になっていて、画像が表示される場所にはローディングアイコンが表示されています。画像が読み込まれるとローディングアイコンがある位置に画像が表示されます。

先にテキストなどのコンテンツが読み込まれるので、重い画像を読み込んでいる間でもユーザーを無駄に長い時間待たせなくて済むのがいいですね。

画像が読み込まれるまでテキストなどを読み進めることができるので、とても効率的です。

使い方も簡単で、画像を設置するHTMLの要素には属性を指定することができます。属性には、data-src、data-alt、data-title、data-srcsetが用意されています。

また、オプションにはonloadCallback、onerrorCallback、onreplaceCallback、thresholdといった項目のセッティングが可能です。

justlazy.js

関連記事

  1. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  2. Babylon Grid
  3. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  4. jquery-steps

    JavaScript

    ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」

    jquery-stepsは、ステップ式のウィザードを実装することができ…

  5. NO IMAGE
  6. bcralnit.js

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP