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. percircle

    JavaScript

    カスタマイズもできるパーセンテージのサークル実装「percircle」

    percircleはCSSによるパーセンテージのサークルを実装できるj…

  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  4. Tiny Colorpicker
  5. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  6. Bootstrap Mobile FullScreen Modal

最近の記事

  1. LE エルイー 6 PANEL CAP
  2. タリーズ ハウスブレンド
  3. BAG-TW1BKシリーズ
  4. 落ち葉と雪

アーカイブ

PAGE TOP