Почему движение при параллаксе фона с задержкой(будто низкий фпс)?

Question

[x-comzbk]

Заранее извиняюсь, скорей всего этот вопрос уже неоднократно решался и обсуждался, Но на скорую руку не смог найти внятного объяснения!
Суть вопроса такова при прокрутке страницы делаю, и прокрутку фона элемента и при этом фон да и сама прокрутка будто подтормаживает! До этого делал подобные эффекты не однократно, но на Jquery - сейчас же решил сделать на нативном JS и обнаружил данный дефект!
А теперь самое интересное - повторяя тоже самое на jsfiddle, все идет плавно! А вот и сама страница где виден дефект!

Помогите люди добрые!!В чем по итогу косяк, что то ни в какую не могу сам догнать!??

Comments

[Дмитрий Лузанов]

Оффтоп: вытащите обращение к DOM при каждом скролле за пределы функции обработчика скролла. И лучше юзать addEventListener.

var head_image = document.getElementById('mainhead');
//обрабатываем скролл

[x-comzbk]

Predve4niy:
если правильно понял вы имеете ввиду сделать так!?

var head_image = document.getElementById('main_head');
window.addEventListener('scroll', function() {
  	var scrolled = window.pageYOffset / 2;
  	head_image.style.backgroundPositionY = scrolled + 'px';
});

по итогу тоже самое, что и было! Возможно я вас не правильно понял!?
и смысл в том, что в песочнице то все работает без задержек и плавно!

[x-comzbk]

Кстати, заметил сейчас странное очень поведение, пока не подключаю js страница скроллится плавно, как только подключил JS сразу с торможением начинает скролл происходить, проверяю даже элементарно тянув за бегунок скролла мышкой!
ммм...методом тыка понял проблема именно в этой строке

head_image.style.backgroundPositionY = scrolled + 'px';

в чем все таки может быть причина!? Кстати на Jquery на этой странице такие же лаги.... ХЕЛП ПИПЛ

[Дмитрий Лузанов]

x-comzbk: это не был отвел на конкретно этот вопрос, просто пожелание как улучшить код.

[x-comzbk]

Predve4niy: ага спасибо, прост не сразу понял))
по итогу не понял, чем лучше addEventListener - надо будет сегодня вечерком этот вопрос изучить в инете! (почему-то предположил, что это могло помочь моей проблеме)) )
а вот про то, что вынести обращение к DOM за пределы события, это сразу понял))) Сам бы даже не обратил внимания на это, спасибо!)

Answer 1

[x-comzbk]

Всем спасибо! как всегда все сложное просто - уменьшив размер и разрешение фото, прокрутка заметнее плавнее стала! Ну хотя все же мне кажется есть небольшие задержки, но уже не настолько критично!