読み込む画像をブラウザサイズで変更するレスポンシブサイト用jQueryプラグイン
0これまで、色々なプラグインがありましたけど、画像の表示の問題って結構ありますよね。
- レスポンシブ対応サイトを作った場合、画像はフルサイズを常時読みこむ
- 結果、スマホ、タブレットで読み込む場合、重くなる
- サーバーサイドで解決する方法はなくもないが面倒
今回はこの問題を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/
それでは、また。
Share