Pilpil

JavaScript

プログレッシブ形式で画像表示時間を短縮してくれる「Pilpil」

Pilpilは、ページの画像表示の時間を短縮するためのJSライブラリです。このライブラリはとても軽量です。具体的には、プログレッシブ形式を使用して画像を表示します。プログレッシブ形式とは、画像の解像度を低く表示して、徐々に高解像度(細かい画像)で表示する方式のことです。対比するのが、ベースライン形式での表示で、元の画像を徐々に読み込む方式です。

こちらの方が一般的ですが、容量の重い画像ですと、画像の表示まで時間がかかる場合があります。それを解決してくれるのがPilpilということです!詳しく見ていきましょう。

Pilpil

デモ

Pilpilの具体的な挙動ですが、ページ読み込みの際、画像にぼかし効果が使用され、すべての読み込みが完了すると本来の画像が表示されるというものです。たとえば、画像サイズがMB級のものを表示させたい場合や、多くの画像を表示させることでサイト自体が重たくなってしまう場合などに効果的なJSライブラリです。

どこに画像が表示されるのかが、あらかじめユーザーにも分かりやすく伝わり、ユーザーに優しい設計がされたサイトに近づけます。画像の読み込みに時間がかかると、「もういいや」とページを離脱する可能性も高くなります。そんな時には、このPilpilを活用しましょう。

ダウンロードしたPilpilのファイルにある、「pilpil.css」と「pilpil.js」を必ず読み込んでください。

構造はいたってシンプルです。最初に小さいもの(低解像度)が、最終的に本来の画像(高解像度)が表示されるといったイメージです。実装方法もとても簡単です。小さめの画像(低解像度)と本来の画像(高解像度)の2つを準備し、それぞれを読み込み[figure class]でまとめます。具体的な読み込み形式は、プラグインサイトで丁寧に記載されています。

これだけで基本的な作業は終わりです。あとは、Pilpilにすべておまかせです。これでユーザーのストレスは解消ですね。

Pilpil

関連記事

  1. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  2. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  3. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  4. Jquery Line Progress Bar
  5. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

  6. LoadGo

    JavaScript

    画像をプログレスバー(ローディング)にできるjQueryプラグイン「LoadGo」

    LoadGoはサイト内にあるロゴなどといった画像をプログレスバー(ロー…

最近の記事

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

アーカイブ

PAGE TOP