godsplane
@godsplane

Как оптимизировать слайдер с 50 фотографиям?

Есть слайдер почти в конце страницы, в нем 50 фотографий, слайдер на slick slider, гугл выдает 99 баллов. но пишет что потенциальная эконмия времени загрузки 273 секунды. Я хочу подгружать весь контент слайдера когда он попадает в видимость пользователя. lazy load включен в самом slick slider. Какие есть варианты это реализовать?
  • Вопрос задан
  • 326 просмотров
Пригласить эксперта
Ответы на вопрос 2
Можете использовать IntersectionObserver.
Как это работает?
На нужный dom-элемент навешивается наблюдатеть с колбеком, внутри которого можно делать всё, что угодно. В вашем случае при срабатывании element.isIntersecting это будет загрузка всех стилей/скриптов слайдера и его инициализация.

Посмотрите пример: https://codepen.io/alnidok/pen/eYNeGMQ

Поддерживается практически всеми современными браузерами:
https://caniuse.com/#feat=intersectionobserver
Ответ написан
1. отлавливать скролл и инициализировать слайдер после того, как блок с ним будет виден пользователю
if (window.innerHeight + document.documentElement.scrollTop === 
document.documentElement.offsetHeight) {
    sliderInit();
}

2. оптимизировать и !кропать картинки, поскольку они даже в блоках с фиксированными и меньшими шириной и высотой будут загружать своё полное разрешение
3. intersection observer
4. поглядеть советы в аналогичном треде
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы