レスポンシブにおけるjs(jQuery)の切り替えについて

Question

jQueryを主に使ってWebサイトの動きをごにょごにょしているのですが、
レスポンシブデザインでスマホ、タブレット、pcで用いるjQueryを切りたいと考えています！
今回の場合は、pcではlightbox(featherlight.js)で表示していた要素を、スマホではタブ切り替え(生jQueryもしくは何かプラグイン)で表示できるようにしようと思っています。

この際の、jsを切り替えるベストな方法を教えてくださると助かります。

ちなみに自分なりに調べたものとしては

• $(window).on('load resize')でwindowのwidthによって切り替える。
• window.matchMediaをつかってwidthによって切り替える。
• window.userAgent.indexOf('iPhone')をつかってユーザーエージェントによって切り替える

などがありました。

$(window).on('load resize')で過去に切り替えたことがあるのですが、
ぎこちなかったり、すこし挙動が出たりして
(#追記：確実にこれのせいとは言えませんが、画面サイズ変更時に2重に読み込まれるのかも。)

どの方法がいいのか迷っております。

もちろん状況に応じて変わるとも思いますし、
$(window).on('load resize')は画面サイズ変更ごとにjsが動いてしまう。iphoneを横に使用した場合の対応。
matchMediaはIE9以下未対応、
useAgentは対応する個体数が多くなるにつれて大変などあるかと思いますが、
これがおすすめ。これ使うならこうしたほうがいいよ。他にもっといい方法があるよ。や、気をつけるべき点などがあれば教えていただけると助かります。

Answer 1

横幅だけで切り替えるならユーザエージェントで切り替えるのが簡単かと思います。
スマホやタブレットのポートレートとランドスケープ、PCのブラウザ幅調整も考慮にいれるならresizeが良いと思います。

$(function() {
    var current = 'small';
    $(window).resize(function() {
        var w = $(window).width();
        var x = 640;
        if (w <= x && current !== 'small') {
            // 640px以下のときの処理
            current = 'small';
        } else if (w > x && current !== 'big') {
            // 641px以上のときの処理
            current = 'big';
        }
    });
});

とか、ちょっと工夫してリサイズして毎回処理が走らないようにするとかでしょうか？

Comments

[N_Kura]

ichamさん、回答ありがとうございます！

なるほど、たしかにresizeのほうが調整できることが多くて便利ですね。(その分色々考慮しなければいけませんが...笑)

参考になるコードありがとうございます。たしかにこれなら処理が軽くなりますね！
前の質問で教えていただいたのですが、setTimeoutを使用しても処理を軽くできるようなので併用してもいいのかな。(教えて頂いた参考サイトです：http://kadoppe.com/archives/2012/02/jquery-window-resize-event.html)

ただ、この場合はloadイベントの処理は別で記述したほうが良さそうですね。

また、resizeでの切り替えで、特に気をつけるべき点などありますでしょうか。

Answer 2

環境の振り分けをする際に自分がよく使う方法は
・documentのDOMContentLodedイベントを使って
・resizeイベントのリスナー登録と実行を同時に行う
というものです。

document.addEventListener(
	'DOMContentLoaded', //①
	function(ev){
		window.addEventListener(
			'resize', //②
			(function on_resize(ev){ //③
				if(window.matchMedia('(max-width: 640px)').matches){ //④
					//スマホ向けの処理
				}
				else{
					//PC、タブレット向けの処理
				}
				return on_resize; //⑤
			})(), //③
			false
		);
	},
	false
);

①DOMContentLoadedイベントはloadイベントより前、HTMLが解析された時点で呼び出されます。そのため、画像の読み込みを待つ間などに中途半端な状態が表示されることがありません。画像のサイズを取得するなど、loadイベントの後に実行する必要がある場合を除いては、たいていこのイベントを利用しています。

②画面の幅を基準にすることを想定して、resizeイベントにリスナーを登録します。

③CSSとの連携を考慮してwindow.matchMediaで環境を振り分けます。

④resizeイベントのリスナー指定部分 (function on_resize(){...})() は、「on_resize」という名前で定義した関数の、実行結果を受け取っています。on_resize関数の中身はresizeイベント時の処理ですが、最初のresizeイベントが起こる前に一度実行することで、初期の状態をセットします。

⑤自分自身を返します。「return arguments.callee」と同じです。ここで自分自身を返すことで、③でresizeイベントのリスナーにこの関数が登録されます。

と、ここまで書いて気づいたのですが、こちら2015年9月の投稿でしたね…
すでに解決されているかと思いますが、ご参考まで。

見当違いでしたら、すみません m(_ _)m