ウィンドウサイズで読み込むJavascriptを切り替える方法

パララックスのページを作成しているときにパララックスのjsが邪魔してたので、読み込まないようにする方法をまとめました。

ウィンドウサイズで読み込みJSの切り替え

レスポンシブサイトの制作時にPCで読み込んでいるjavascriptを変更したいときに使用するコード。

PCサイトでパララックスのページを制作していて、スマホ表示では真っ白になる現象が起きたので、調べるとでparallax.jsが悪さしてるみたい。そこでスマホ表示のとき、つまりブラウザのウィンドウサイズが649pxのときにはparallax.jsを読み込まないようにしました。

<script type="text/javascript">
jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 649px)' ).matches) {　//切り替える画面サイズ
		$.ajax({
			url: '../js/parallax.js',
			dataType: 'script',
			cache: false
	  });
	//モバイル環境の場合
	} else {
	   $.ajax({
			url: '',
			dataType: 'script',
			cache: false
		});
	};
});
</script>

ユーザーエージェントで読み込むjavascriptを切り替える方法

ウィンドウサイズだと、今度はiPadとの判別が難しくなるので、ユーザーエージェントで判別して読み込むjavascriptを切り替えるコードも書いときますね。

<script type="text/javascript">
$(function(){  
var agent = navigator.userAgent;  
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){  
    $.ajax({  
    url: '読み込みたいスマホ用javascript',  
    dataType: 'script',  
    cache: false  
  });  
  }else{  
    $.ajax({  
    url: '読み込みたいPC用javascript',  
    dataType: 'script',  
    cache: false  
  });  
}  
});
</script>

-WEB