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

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  2. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  3. jQuery Smart Placeholder
  4. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  5. slimMenu
  6. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP