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」を活用されてみてはいかがでしょうか?

no-imageチェックボックスをアニメーショントグルにする「jquery-simpletoggler」前のページ

カスタマイズしたコンテキストメニューを実装できる「jQuery contextMenu plugin & polyfill」次のページjQuery contextMenu plugin & polyfill

関連記事

  1. Rain & Water Effect Experiments
  2. ToxicBox

    JavaScript

    さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」

    ToxicBoxは、ライトボックスのjQueryプラグインです。近年、…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  5. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  6. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP