Как оптимизировать скроллинг блоков JS, CSS3?

Question

[Diode Bot]

Делаю сайт со скроллингом отдельных блоков информации. Блоки растягиваются на весь экран, у некоторых на фоне стоит изображение 1920х1080px. Скроллятся они через код:

$(document).ready(function(){
  
  jQuery.easing.def = "easeInOutQuad";
  
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
   e.preventDefault();

  var target = this.hash,
   $target = $(target);

  $('html, body').stop().animate({'scrollTop': $target.offset().top
     }, 1000, "swing", function () {window.location.hash = target;});
   });

});

С подключением плагина jQuery easing.

Проблема в том, что на мониторе ноутбука скроллинг происходит плавно, но при отображении на мониторе 1920х1080 блок с фоновым изображением лагает и анимация получается дерганная. Помимо этого используется пара transition в css, но я убирал их и это никак не влияло на работу скроллинга.

Как написать правильно скрипт или разместить изображение/сверстать блоки, чтобы этих лагов не было?

Код CSS блока

.content {height: 100%;}
.content section {width: 100%; height: 100%;}

#main {
  background: url('../images/main_bg.jpg');
  background-size: cover;
  background-position: center;
}

Код HTML

<div class="content">
        
<section id="main">
 </section>
        
 <section id="bio">
 </section>
        
<section id="events">
</section>

</div>

Comments

[Diode Bot]

Изображения в jpg ~300 кб

[Diode Bot]

Лаги проявляются только в Google Chrome

Answer 1

[Andrew Dabich]

Попробуйте использовать Jquery плагин Transit. Он использует css3 анимацию, что в своем дает плавность и меньше лагов. Ведь css3 не так нагружает процессор как js. Но конечно если не слишком поможет, то это из-за большого размера картинки. Но думаю должен помочь, если правильно использовать и переписать анимацию этим плагином.