Progressively

JavaScript

画像を徐々に読み込んでくれるJSライブラリ「Progressively」

Progressivelyは画像を徐々に読み込ませることができるJSライブラリです。最初は画像にボカシが入っていますが、スクロールしていくことで画像がくっきり表示されていきます。jQueryなどによるサードパーティーのライブラリに依存することなく使えるのがいいですね。ファイル容量もかなり軽量に仕上がっています。

Progressively

デモ

デモではたくさんの画像が縦に並んでいて、はじめは画像がボカされています。下へスクロールしていくと同時に、ボカされていた画像がくっきり見えるようになってきます。

画像をたくさん載せているページの場合、読み込みが遅くなってしまうケースが多々ありますが、そんなときにこのライブラリを活用するとページ閲覧者にとっても快適になるのではないでしょうか?

マークアップなどの使い方もシンプルなので、手軽に実装できると思います。また、オプションには、throttle、delay、onloadComplete、onload、.render()といった項目が用意されています。

画像を多用するサイトで、画像を徐々に読み込ませる機能を実装したい場合は、ぜひ覚えておきたいJSライブラリといえそうです。

Progressively

Stripe.Com Navigationコンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」前のページ

グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Timer」次のページCSS Jquery Pie Countdown Timer

関連記事

  1. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  2. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  3. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  4. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  5. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  6. jQuery Notebook

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP