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

no-imageシンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」前のページ

パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」次のページLight Modal

関連記事

  1. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  2. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  3. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  4. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

  5. Vimeo Carousel Gallery
  6. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP