breakpoints.jsを使用したレスポンシブでの画像切り替え
Posted: 2013.07.30 / Category: javascript / Tag: jQuery
PCは横長なので画像も横長に作成することが多いですね。しかし、レスポンシブでスマートフォンに対応した場合は、横長画像だとよくわからなくなってしまいます。
「breakpoints.js」を使用すれば割りとお手軽にPC用とスマホ用の画像を切替えできますよ。
Sponsored Link
画像の準備
今回は単純にPCとスマホの2種類の画像を切り替えたいと思います。
PC用に「image-pc.png」と、スマホ用に「image-sp.png」を作成しました。
ベースのimgを置き換える方法
htmlではPC用の画像を配置して、クラスを「sp-img」としておきます。
html
<img src="img/image-pc.png" class="sp-img">
「640」をブレークポイントにしますので「breakpoints」オプションに[ 1, 640 ]と指定します。
また、ブレークポイントの数だけ「$(window).bind」の部分を追加します。
javascript
<script src="js/jquery.js"></script> <script src="js/breakpoints.js"></script> <script type="text/javascript"> $(function() { $(window).setBreakpoints({ distinct: true, breakpoints: [ 1, 640 ] }); $(window).bind('enterBreakpoint640',function() { $('.sp-img').each(function() { $(this).attr('src', $(this).attr('src').replace('-sp', '-pc')); }); }); $(window).bind('enterBreakpoint1',function() { $('.sp-img').each(function() { $(this).attr('src', $(this).attr('src').replace('-pc', '-sp')); }); }); }); </script>
ウィンドウが640px以下の場合は画像のファイル名を「-pc」から「-sp」に置き換えるということをしています。
ただ、jsで切り替えているので、スマホサイズの場合はPC用の画像とスマホ用の画像で二重で読み込まれます。
二重で読み込ませない方法
二重に読み込ませないようにするには「src」を空にしておいて、data属性などで指定するということもできます。
html
<img class="sp-img" data-img="img/image-pc.png">
javascript
$(function() { $(window).setBreakpoints({ distinct: true, breakpoints: [ 1, 640 ] }); $(window).bind('enterBreakpoint640',function() { $('.sp-img').each(function() { $(this).attr('src', $(this).data('img')); }); }); $(window).bind('enterBreakpoint1',function() { $('.sp-img').each(function() { $(this).attr('src', $(this).data('img').replace('-pc', '-sp')); }); }); });
「src」を指定しないことのデメリットも色々とあったりすると思いますが、サーバーの負荷とか3G回線とか考えるのこちらでも。
COMMENTS
やまもと 2015-11-20 12:50
初めまして。2点教えてください。
・ページを参考にさせていただき作成してみたのですが、data-imgにすると画像が表示されません。どうやったら画像が表示されますでしょうか?
・PC用とSP用を指定する際は、.replaceのところにPC用とSP用を指定すればいいんでしょうか?
webOpixel 2015-11-24 11:00
JSのエラーなどは表示されてないですか?
基本的には「-pc.png」「-sp.png」を切り替えています。
2つの画像を用意すればJSの変更は必要ないはずです。
K 2015-12-08 18:41
すみません、ひとつ教えて頂けますでしょうか。
記事を参考にブレイクポイントを下記の様に追加してみたのですが、
上手く表示が切り替わりません。
ブレイクポイントをもうひとつ追加したい場合どのようにすればいいのでしょうか。
$(function() {
$(window).setBreakpoints({
distinct: true,
breakpoints: [ 1, 640, 960 ]
});
$(window).bind(‘enterBreakpoint960’,function() {
$(‘.sp-img’).each(function() {
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘-tb’, ‘-pc’));
});
});
$(window).bind(‘enterBreakpoint640’,function() {
$(‘.sp-img’).each(function() {
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘-sp’, ‘-tb’));
});
});
$(window).bind(‘enterBreakpoint1’,function() {
$(‘.sp-img’).each(function() {
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘-pc’, ‘-sp’));
});
});
});
webOpixel 2015-12-09 11:44
構造的には良さそうな気はするのですが「replace(‘-sp’, ‘-tb’)」この指定だとpcからはtbにならないのではないかなと思いました。