Термин «ленивая загрузка» (lazy load) не нов. Такая техника довольно давно используется на сайтах с высокой посещаемостью для снижения объемов трафика между сервером и клиентом. Суть ее прямо противоположна техники предзагрузки изображений, используемой в фотогалереях и каталогах. Если для предзагрузки мы стараемся с самого начала незаметно поместить в кэш браузера пользователя все доступные изображения на странице, чтобы не возникло ненужных пауз при просмотре страницы, то для ленивой загрузки мы стараемся показать пользователю как можно меньше картинок только из видимой части страницы. К примеру, если рассматриваемый сайт новостной или с длинной главной страницей, состоящей из аннотаций или сменяющих друг друга кусочков тематик каталога с различными превьюшками и небольшими изображениями, то при каждом заходе на такую страницу браузер пользователя ломанется на сервер в поисках еще не закэшированных картинок, даже если пользователь хочет просто воспользоваться навигацией для перехода в нужный каталог сайта. В итоге мы использовали канал пользователя, его трафик, трафик сервера и мощности сервера для раздачи изображений, которые никто не увидит.
Техника ленивой загрузки предполагает, что пользователю нужны лишь те изображения, которые находятся в пределах viewpoint-а. То есть, нет никакой надобности грузить кучу аватарок из комментариев, если мы до них вообще не доберемся. Забудем про мусорный трафик и сосредоточимся лишь на том, что действительно важно. Если учесть, что каждая картинка — это, как правило, отдельный запрос на сервер, трафика наберется достаточно.
Сейчас мы не будем говорить про раздачу статики с помощью сервера, nginx и его настройку и т.п. Сосредоточимся на клиенте.
Плагин к jQuery под названием Lazy Load позволяет реализовать наше желание — он запрещает загрузку картинок из выбранных элементов страницы и возвращается к ним лишь тогда, когда пользователь докручивает страницу до них. Если сервер не может похвастаться скоростями и широтой канала, то можно на месте недогруженных изображений вставлять плейсхолдер, показывающий что картинка вот-вот здесь появится. Кроме того, возможно добавить эффект появления, например, fadeIn, что довольно симпатично смотрится.
На его базе оформлен и плагин к WordPress . Установка происходит в два клика, поэтому смысла что-то дополнительно описывать нет. Разве что, если он не заработал с первого раза — значит, придется ковыряться в коде и прописывать селекторы конкретно для вашего блога, но это при поверхностном знакомстве с jQuery сделать просто. Селекторы можно настроить практически любые, даже использовать контейнер с прокруткой, внутри которого нужен подобный эффект.
Подход ленивой загрузки изображений использует, например, YouTube. Если резко прокрутить главную страницу вниз, можно заметить, как подгружаются превьюшки видеороликов. Это позволяет им немного экономить трафик и снижать нагрузку, ибо для данного сервиса раздача картинок — одна из самых затратных частей.
