JQuery/CSS animieren Übergänge Verlangsamung Seite

Question

Ich habe eine Seite, wo ein Benutzer scrollt und Animationen angezeigt werden, wenn sie auf der Seite sichtbar sind, und ausblenden, wenn sie nicht sind. Dies passiert immer dann, wenn die Seite gescrollt wird, aber es scheint zu viel Rechenleistung zu beanspruchen und die Seite scrollt eher statisch. Hier

ist der Code Ich verwende:

$('body').scroll(function(){ 


     $('.anim').on('inview', function (event, visible) { 
      if (visible == true) { 
      // element is now visible in the viewport 
      $(this).removeClass("hidden"); 
      $(this).addClass("visible animated fadeIn"); 
      } else { 
      // element has gone out of viewport 
      $(this).removeClass("visible animated fadeIn"); 
      $(this).addClass("hidden"); 
      } 
     }); 


     $('.anim_bounceIn').on('inview', function (event, visible) { 
      if (visible == true) { 
      // element is now visible in the viewport 
      $(this).removeClass("hidden"); 
      $(this).addClass("visible animated bounceIn"); 
      } else { 
      // element has gone out of viewport 
      $(this).removeClass("visible animated bounceIn"); 
      $(this).addClass("hidden"); 
      } 
     }); 

     $('.anim_bounceInUp').on('inview', function (event, visible) { 
      if (visible == true) { 
      // element is now visible in the viewport 
      $("#"+$(this).attr("relID")).removeClass("hidden"); 
      $("#"+$(this).attr("relID")).addClass("visible animated bounceInUp"); 
      } else { 
      // element has gone out of viewport 
      $("#"+$(this).attr("relID")).removeClass("visible animated bounceInUp"); 
      $("#"+$(this).attr("relID")).addClass("hidden"); 
      } 
     }); 

    }); 

Durch mein Wissen, Brennen Funktionen auf Rolle ist nicht sehr effizient. Gibt es einen besseren Weg für mich, dies zu erreichen? Hier

ist die Seite in Frage, es ist nur ein Testgebiet ...

http://185.116.213.24/~demotester/brochure-test/

Answer 1

This readme sagt, was Sie brauchen einfach zu fangen inview Ereignis withoyt direkte Interaktionen mit scroll Ereignis.

Auch, wenn Sie aus irgendeinem Grund scroll Ereignis fangen müssen, muss der Handler so leicht wie möglich sein. Zum Beispiel sollten Sie alle jQuery Objekte in globalen Variablen außerhalb des Handlers zwischenspeichern, anstatt jedes Mal den Konstruktor aufzurufen.