Как убрать тормоза translate, когда элементы скрыты с помощью overflow hidden?

Question

[htmlclassic]

Делаю слайдер. У слайдера overflow hidden, все слайды(.slide>img) на одной строке. Меняю слайды с помощью транслейта.

При первой загрузке страницы, если тыкнуть сразу на переключение последнего слайда, то транслейт идёт с мини тормозами. Если пройтись (переключиться) по всем слайдам, то больше лагов нет (как будто браузер все слайды-картинки, которых пока что не было видно во вьюпорте, просто не загружает).

Я как-то могу слайды, которые в overflow hidden заранее подгрузить?

Comments

[thatguy1]

Как минимум использовать translate3d.

[WapSter]

thatguy1, и в чем разница?

[thatguy1]

WapSter, в производительности.

[WapSter]

thatguy1, достаточно опрометчивое заявление без тестов. Да translate3d заставляет браузер работать с графическим процессором, но не всегда это хорошо. В большинстве ноутбуков, дискретная карта при серфинге отключена, и когда начинается подобная анимация, браузер ждет пока она выйдет из состояния покоя, что сказывается на частоте анимации. Еще зависит от самой анимации, на сколько она сложная. Так что совет так себе.

[WapSter]

Попробуй использовать will-change. Это даст браузеру понять, что в этом месте будет анимация

[thatguy1]

WapSter, вот уж, что действительно бесполезно, так это will-change. А тесты сам найдёшь.

[WapSter]

thatguy1, тест для его анимации? Где же?)