Загрузка изображений и анимирование

[Raadsert]

Здравствуйте.

У меня возникла проблема, при загрузке различных изображений сильно зависает анимация (именно в момент загрузки изображения) основанная на "requestAnimationFrame".

Пробовал ставить lazyload но ничего не получилось.

К примеру есть такой сайт https://themarcus.com , на нём задействована аналогичная анимация на "requestAnimationFrame" при том, загружаются изображения через lazyload но никаких зависаний в анимации нет.

Подскажите как добиться такого эффекта?

[voraa]

К примеру есть такой сайт https://themarcus.com , на нём задействована аналогичная анимация на "requestAnimationFrame"

С чего Вы это взяли? Там анимация где то через transform, а где то просто video.

[voraa]

Ну и еще зависит от того, что именно вы делаете в requestAnimationFrame.
Туда тоже можно напихать тяжелых операций, занимающих кучу времени, чего делать не стоит.

[Raadsert]

Ну и еще зависит от того, что именно вы делаете в requestAnimationFrame.
Туда тоже можно напихать тяжелых операций, занимающих кучу времени, чего делать не стоит.

У него через "requestAnimationFrame" присваивается значение transform, обычная стандартная анимация с движением влево и через время переносом картинок в конец и зацикливании этого эффекта, там на самом деле множество особенностей.

У меня же просто анимация перемещения влево, так же через transform, но во время загрузки картинок присутствуют микро-лаги (картинка грузится -> лаг -> картинка загрузилась -> анимация отлагала) как будто скрипт ждёт пока загрузится картинка и только после этого продолжает свою работу. Да, картинки маленькие аналогичные по размеру картинкам из примера.

Что делаю с "requestAnimationFrame"? Всё просто как обычная анимация:

function exemple(*) {
 requestAnimationFrame(function anim(e) {
  /* code */
  requestAnimationFrame(anim)
 })
}

Так вот, господа, у кого-то есть предположения или знание того почему происходят подобные микро-лаги или как устроена загрузка изображений (без микро-лагов в исполнении скрипта) на том сайте что был примером?

[voraa]

requestAnimationFrame(function anim(e) {
  /* code */
  requestAnimationFrame(anim)

Если говорить про "тяжелые" операции, то они как раз в /*code*/
Если вы делаете только

elem1.style.transform = ...
elem2.style.transform = ....
....

То по идее никаких задержек быть не должно
Но если там еще всякие getComputedStyle, getBoundingClientRect, да даже всякие обращения к offsetWidth, offsetLeft и прочие запросы размеров элементов, изменения в DOM. то это может вызвать торможения. Это тяжелые операции.

Загрузка через нативный <img loading="lazy" >?

Ну и попытаться понять, что вызывает задержку можно с помощью средств разработчика браузера.

[Raadsert]

Ну и еще зависит от того, что именно вы делаете в requestAnimationFrame.
Туда тоже можно напихать тяжелых операций, занимающих кучу времени, чего делать не стоит.

elem1.style.transform = ...
elem2.style.transform = ....
....

loading="lazy" присутствует. Никаких тяжёлых операций в цикле анимации нет.

Просмотрел работу сайта через performance, там показало что чрезмерное время выполнения тасков вызывает "Composite Layers", а на js нет никаких нареканий.

Не знаете с чем может быть связана проблема длительного выполнения "Composite Layers" ?