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. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  2. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  3. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  4. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  5. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

最近の記事

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

アーカイブ

PAGE TOP