jQueryで動作が重い

Question

お世話になります。
現在作成中のサイトが、
動作が重くなってしまいました。

原因はjQueryの多用かと思います。

そこで、コードの書き方を短縮すれば動作が軽量化されると思い、
模索したのですが、js初心者なため、イマイチ理解できず質問させていただきます。

script部分は以下になります。

<script>
var controller = new ScrollMagic.Controller();
	$(function () { 
		var scene = new ScrollMagic.Scene({triggerElement: "#pin2"
		,triggerHook : "onLeave"})
						.setPin("#pin2")
						.addTo(controller);
	});
	
	$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea")
						.addTo(controller);
	});
	
	$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv2"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea2")
						.addTo(controller);
	});
	
		$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv3"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea3")
						.addTo(controller);
	});
	
		$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv4"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea4")
						.addTo(controller);
	});
	
		$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv5"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea5")
						.addTo(controller);
	});
	
		$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv6"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea6")
						.addTo(controller);
	});
	
		$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv7"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea7")
						.addTo(controller);
	});
	
			$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv8"
			 ,duration: 100
		,triggerHook : "onLeave"})
						.setPin("#textArea8")
						.addTo(controller);
	});
			$(function () { 
		var scene = new ScrollMagic.Scene({
			triggerElement: "#targetDiv9"
			 ,duration: 500
		,triggerHook : "onLeave"})
						.setPin("#textArea9")
						.addTo(controller);
	});
	
</script>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/crossfade.jquery.js"></script>
<script>
$(function(){
$('.crossfade-01').crossfade({
	threshold: 0.1
	});
$('.crossfade-02').crossfade({
	threshold: 0.1
	});
$('.crossfade-03').crossfade({
	threshold: 0.1
	});
$('.crossfade-04').crossfade({
	threshold: 0.1
	});
$('.crossfade-05').crossfade({
	threshold: 0.1
	});
$('.crossfade-06').crossfade({
	threshold: 0.1
	});
$('.crossfade-07').crossfade({
	threshold: 0.1
	});
$('.crossfade-08').crossfade({
	threshold: 0.1
	});
$('.crossfade-09').crossfade({
	threshold: 0.1
	});
});

</script>

      <script type="text/javascript" src="js/jquery-scrollInTurn.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
	  $('.fadeimg').scrollInTurn({
		selector: 'img',
		fadeInSpeed : 1000,
		delaySpeed : 3000
	});
	
    $('.fade').scrollInTurn({
		selector: 'p',
		fadeInSpeed : 2000,
		delaySpeed : 1000
	});
  });
</script>

<script type="text/javascript">
$(function(){
  $("#toggle").click(function(){
    $("#menu").slideToggle();
    return false;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
});
</script>

スクロールに対応したアニメーションがほとんどですが、
短縮記述は可能でしょうか
よろしくお願いいたします。

Answer 1

$(function () { 
        var scene = new ScrollMagic.Scene({triggerElement: "#pin2"
        ,triggerHook : "onLeave"})
                        .setPin("#pin2")
                        .addTo(controller);
    });

上記この繰り返し部分はHTML次第で１０分の１程度にまとめることが可能

<script>
$(function(){
$('.crossfade-01,.crossfade-02,.crossfade-03,.crossfade-04,...').crossfade({
    threshold: 0.1
    });
</script>

のようにするか、わざわざクラス名を別のものにせず、共通のクラス名をつけてセレクタでそのクラスを指定。

処理速度というより、DRYじゃないので。

Answer 2

答えが間違っているかもしれませんが、
jQueryのanimateやcrossfadeを使用するよりも、css3のtransitionを使用する方が速度は改善されます。
$(.....).css({transition:....});
となりますでしょうか?
html構造の組み換えがちょっと大変ですね。
最近はどのブラウザもjs処理が高速になってきましたが、js処理が低速だったころは劇的に速度が改善されました。

Comments

[J4CK1E]

スクロールによっての動作ですのでtransitionで実現するのは厳しい気がします。
トリガーを指定してのアニメーションですので...
こちらはこちらでナビゲーションなどに利用させていただきます！
ありがとうございます！

[rik]

スクロールによってのトリガーにてJavaScript(jQuery)からcssを変更するという事になります。
私はjQueryを使用せず全てネイティブJavaScriptで書いていますが、そのように書けています。複数の処理が重なっても速度低下があまりありませんのでお勧めです。

[J4CK1E]

なるほど、そういう使い方があるのですね...
調べつつちょっと挑戦してみようかと思います。

Answer 3

僕だったら
・似た処理は共通関数にする。
・アニメーションはCSS3を検討する。
をするかなと思います。

共通化はthisを使って、個別な値が必要なら
オブジェクトなり配列なりのテーブルを作って参照させるとか、
html要素のdata-hogeなどの属性にいれちゃうとかします。
あとはスクロールを全部拾うと重たくなるので、間引くとかですかね。
これはレイテンシに関わるので最後に回しそうですが。

Answer 4

体感的な軽さに繋がるかわかりませんが、同じ記述がたくさんあるので、関数化してみてはどうでしょうか？

<script>
$(function () { 
	//カンマ区切りでIDやclassを入れたいだけ入れる
	var firstArray = ["#pin2", "#targetDiv", "#targetDiv2","#targetDiv3", "#targetDiv4", "...."];
	for(var i=0; i < firstArray.length; i++){
	//配列に格納した要素をメソッドに入れる
	//forをlengthまでの回数を回しているので、配列の要素数が増えてもOK
		firstMethod(firstArray[i]);
	}
});

//最初のメソッドを定義
function firstMethod(target){
	var _target = target;
	var scene = new ScrollMagic.Scene({
            triggerElement: _target
             ,duration: 500
        ,triggerHook : "onLeave"})
                        .setPin(_target)
                        .addTo(controller);
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/crossfade.jquery.js"></script>
<script>
$(function () {
	//カンマ区切りでIDやclassを入れたいだけ入れる
	var secondArray = ['.crossfade-01', '.crossfade-02', '.crossfade-03', '.crossfade-04', '....']; 
	for(var i=0; i < secondArray.length; i++){
		secondMethod(secondArray[i]);
	}
});
function secondMethod(target){
	var _target = target;
	$(_target).crossfade({
    threshold: 0.1
    });
}
</script>

<script type="text/javascript" src="js/jquery-scrollInTurn.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    thirdMethod('.fadeimg', 'img', 1000, 3000);
    thirdMethod('.fade', 'p', 2000, 1000);
  });

  function thirdMethod(target, select, fSpeed, dSpeed){
  	var target = _target;
  	var select = _select;
  	var fSpeed = _fSpeed;
  	var dSpeed = _dSpeed;
  	$(target).scrollInTurn({
          selector: select,
          fadeInSpeed : fSpeed,
          delaySpeed : dSpeed
    });

  }
</script>