no-image

JavaScript

ビューポートやコンテナ幅をベースに異なるサイズの画像を読み込める「jQuery Responsive Image Plugin」

jQuery Responsive Image Pluginは、ビューポートやコンテナ幅をベースに、サイズの異なる画像を読み込むことができるjQueryプラグインです。それぞれの環境に合わせた最適なサイズの画像を設定することが可能です。

jQuery Responsive Image Plugin

デモ

デモでは、ビューポートをベースにしたものやコンテナの幅をベースにしたものなどが用意されています。ブラウザ幅を縮小・拡大すると、それに合わせて読み込む(表示される)画像が切り替わるのを確認できるかと思います。

無駄に容量の大きい画像を読み込んだりしなくても済むので、画像をたくさん使ったサイトなんかにはとても最適な機能ですね。data-min-widthという属性を用いて、ブレイクポイントを設定できるようになっています。

オプションには、source、container、resizeEvent、minWidthDefault、maxWidthDefault、minDprDefault、attributes、preload、autoDpr、onGetWidth、onLoadSourcesが用意されているほか、イベントもいくつか設定できます。

というわけで、ビューポートやコンテナ幅をベースに異なるサイズの画像を読み込みたい人は、ぜひ「jQuery Responsive Image Plugin」を活用されてみてはいかがでしょうか?

関連記事

  1. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  2. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  3. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  4. no-image
  5. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  6. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP