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

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

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

今回はこの問題を１発で解消する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