Слишком ленивая загрузка изображений

Lazy Load экономит ресурсы сервера и трафик пользователя за счет сокращения передаваемых данных, но расходует нервы посетителей сайтов. Если встретите сайт где эту технологию используют с умом, то вам попалось животное из Красной книги.

Я люблю МИФ. У них есть интересный научпоп, но посмотрите на сайт:

Шестиядерный процессор, частичная обработка на GPU, канал в десятки мегабит и тормозящая страница. Тормозящая, потому что привычное поведение — нажал ссылку и видишь страницу целиком, как в книге. Здесь даже если отсутствующая картинка не оказалась в фокусе, то боковым зрением всё равно видно её отсутствие. Но самое главное что это упирается не в проблемы железа и сети, а в неправильно настроенную технологию.

Или возьмём М.Видео. Классный сервис, частенько выгодные акции. Но этот лаг в секунду постоянно раздражает. Ладно бы пару раз, но ты знаешь что он повторится при следующей прокрутке. И после неё. И в другом разделе.

Изображения должны подгружаться в два этапа:

  1. Сначала загружаются те, которые находятся в видимой области экрана.
  2. Потом загружаются те, что находятся ниже видимой области на длину одной прокрутки.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *