• ホーム
  • このブログについて
  • Flipsについて

Flips Blog Web担の小技

ウェブ担当者の為の小技&小ネタ

読み込む画像をブラウザサイズで変更するレスポンシブサイト用jQueryプラグイン

0
  • 投稿者: Yamada_nt
  • カテゴリー: JavaScript
  • — 2013年12月24日

レスポンシブ対応

これまで、色々なプラグインがありましたけど、画像の表示の問題って結構ありますよね。

  • レスポンシブ対応サイトを作った場合、画像はフルサイズを常時読みこむ
  • 結果、スマホ、タブレットで読み込む場合、重くなる
  • サーバーサイドで解決する方法はなくもないが面倒

今回はこの問題を1発で解消するjQueryプラグインがあったのでご紹介致します。

ひとまずデモで確認を。

デモをひらいてもらい、まずはブラウザの横幅サイズを、変更してみてください(タブレット、スマホではなく、デスクトップ、ノートPCのブラウザが必要)

レスポンシブ対応

さらに確認する点でいうと、そのサイズ別に、それぞれの画像をタブで表示してみましょう。同じ画像ですが、ブラウザサイズが変わることで、画像サイズが全く別の物であることがわかります。

  • デモページはこちら

サンプルのソースコードでもわかる通り

<img class="img-responsive" data-src="http://farm4.staticflickr.com/3745/11414868284_40cc4879e0_[[display]].jpg" src="images/pixel.gif" alt="image">

この[[display]]の部分が、ブラウザサイズによって、b、z、m、の3種類に分けられる。

$("img[data-src]").responsivelazyloader({
    mediaQueries : {  // The mediaqueries used by the lazyloder.
      'phone'   : "(max-width: 767px)",
      'tablet'  : "(min-width: 768px) and (max-width: 991px)",
      'desktop' : "(min-width: 992px)"
    },
    displays : {  // The displays to combine grid system & mediaqueries
        'defaults' : {
            'display' : {
                'desktop'  : 'b',   //1024
                'tablet'   : 'z',   //640
                'phone'    : 'm',   //320
                'defaults' : 'b'    //1024
            }
        }
    }
});

また、divごとにサイズの指定も可能になる。

<div class="col-md-8">

'col-md-8' : {
'parent' : '.col-md-8',
'gridClass' : 'col-md-8',
'display' : {
'phone' : 'n', //320
'defaults' : '' //500
}

jQueryが初めてという方には敷居が高いかもしれませんが、わりと慣れている方なら簡単に導入出来るのもポイントです。

是非チェックしてみてくださいね。

jQuery Responsive Lazy Loader

ダウンロードサイト
http://plugins.jquery.com/responsivelazyloader/

デモサイト
http://jetmartin.github.io/responsive-lazy-loader/demo.html

解説(英語)
http://jetmartin.github.io/responsive-lazy-loader/

それでは、また。

このエントリーをはてなブックマークに追加
Pocket

Share

タグ: JavaScriptjQuery

Flips 手軽に始めるビジネスホームページ

— Yamada_nt

1999年より、Web制作、ウェブサイト運営支援を行なっており、Web担当者へお勧めの情報を共有しています。2007年より「ホームページを作る人のネタ帳」というブログをはじめ、現在はプロブロガーとして生活。 2008年、アルファーブロガーアワード受賞。 全国各地でブログセミナーや、サイト運営に関する様々な運営ノウハウセミナーなども行なっております。

  • 前の記事 各種パーツごとにWebデザインを色々見たい人の為のまとめサービス色々|レスポンシブ・ヘッダー・フッター・サイドバー・ロゴ等
  • 次の記事 2013年の4大人気Webデザインのトレンド

関連する記事

  • jQueryスライダー jQueryを使ってポートフォリオサイトでよく使われる顧客の声や取引企業アイコンを美しく表示する 2014年02月28日
  • 画像ギャラリーサイトに最適なjQuery ちょっとした写真紹介サイトや写真共有サイトで使えるギャラリー用jQueryプラグイン 2014年11月29日
  • favicon変更 faviconに数値を表示させたり、favicon自体をその場で変更したりするjQueryプラグイン 2015年11月28日
  • 201402250058 応答型サイドメニューを呼び出すjQueryプラグイン「Sidr」 2014年04月5日
  • 新しい記事

    • 新着記事
    • タグ
    • クリエイターInstagramアカウント海外で人気のデザイナーのInstagramアカウント2016年5月24日
    • スワイプ対応レスポンシブでスワイプをサポートしているjQueryカルーセルプラグイン2016年5月13日
    • サイコロブロガーが陥る「サイコロのふりすぎ」と「時間の使いすぎ」問題2016年4月30日
    • デザインエディタ最近見つけたBeFunky Photo EditorとかいうWebフォトエディタサービスがスゴイ2016年4月29日
    • 新入社員研修とある新入社員研修の無駄なこと無駄なこと・・・2016年4月26日
    • Adobe CSS Excel Facebook Google Illustrator JavaScript jQuery Mac Photoshop SEO SVG お知らせ アイコン インスピレーション エクセル サイト運営 サービス デザイン パワーポイント フォント フラットデザイン フリーソフト ブログ プレゼン マーケティング ライフハック 中小企業に訊く 便利 文章術 素材 運用
  • 記事の検索ができます

  • 人気記事

    • 2015下半期Webデザイナー、ディレクターなら絶対読んでおかないと後悔する厳選記事まとめ
    • 今度こそ3日で覚えるパワーポイントテクニック集、デザイン、表現力アップまとめ
    • 国内人気のクレジット不要、商用利用可の無料素材サイト24+シェアランキング
    • 適切な伝え方|とにかく人にものを伝えるのが苦手な人が一度は読むべき5つのコツ
    • ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事
    • 見逃してません?ここ最近公開&アプデされた日本語対応の良質無料フォントまとめ
    • 配色センスが全くない?それならマテリアルパレットをちょっと使ってみて?
    • 今更聞けない画像ファイルの種類と使用する形式の選択
    • 20以上のレスポンシブ対応の無料htmlテンプレート HTML5UP
  • アーカイブ

  • Twitter

    @flips_jp からのツイート
  • Facebookページ

  • 最近の投稿

    • 海外で人気のデザイナーのInstagramアカウント 2016年5月24日
    • レスポンシブでスワイプをサポートしているjQueryカルーセルプラグイン 2016年5月13日
    • ブロガーが陥る「サイコロのふりすぎ」と「時間の使いすぎ」問題 2016年4月30日
    • 最近見つけたBeFunky Photo EditorとかいうWebフォトエディタサービスがスゴイ 2016年4月29日
    • とある新入社員研修の無駄なこと無駄なこと・・・ 2016年4月26日
  • カテゴリ

    • Chrome
    • JavaScript
    • SEO
    • Webデザイン
    • おしらせ
    • サイト運営のコツ
    • サービス
    • ソーシャルメディア
    • テンプレート
    • フリーソフト
    • フリーフォント
    • プレゼン資料の作り方
    • ライフハック
    • 未分類
    • 無料アイコン
    • 無料素材
  • サイト内検索

© Copyright 2019 Flips Blog Web担の小技. Typegrid Theme by WPBandit.