Lazyload: отложенная загрузка изображений, скриптов и контента (бесконечный скролл)

30 марта 2011

3.65 из 5

В разделе вопрос-ответ часто спрашивают, как на Временно.нет реализована подгрузка изображений.

Если вы не обратили внимание, то изображения загружаются только когда оказываются в видимой области страницы.

Это техника называется «ленивая загрузка» (lazy loading). В статье я затрону не только ленивую загрузку картинок, но и скриптов, стилей и контента.

Но начну все-таки с картинок.

Ленивая загрузка изображений

Изображения — это, как правило, самые тяжелые элементы страницы. Поэтому если на странице изображений много, то не стоит загружать их все сразу. Во-первых, это ускорит загрузку страницы, во-вторых, может существенно снизить нагрузку на сервер, а в-третьих, сэкономит трафик пользователю.

Lazyload jQuery plugin

На странице плагина написано, что он не юзабелен и не работает с современными браузерами, и у автора другие дела. Но отчаиваться не стоит. Свежую версию берем отсюда. Этот плагин мы используем на Временно. Работа его предельно проста и описана на сайте, не буду копипастить.

YUI 3: ImageLoader

Вышеописанный плагин был вдохновлен этим проектом. Использование YUI Image Loader немного сложнее, чем лейзи лоад. Надо собирать изображения в группы, на группы вешать триггеры. Изображение группы не будут загружаться, пока не дернется триггер. На Яху можно найти много вещей, где букв много, а толку мало. Но есть и полезные утилиты. Рекомендую покопаться.

MooTools LazyLoad

Из названия все ясно. Использовать очень просто.

lazierLoad — Image Lazy Loader for Prototype

А это для прототайпа.

Загрузка JavaScript и CSS

Отложенная загрузка стилей и скриптов не настолько востребованная задача, как загрузка изображений. Но если в вашем проекте есть смысл в том, чтобы отложить загрузку каких-то больших плагинов или стилей, то следует подумать и потестировать, возможно, стоит это сделать.

Инструментов для этого много. Горячий французский парень Эрик Даспет сделал сравнительную таблицу разных загрузчиков (всего больше 20).

Ленивая загрузка контента (бесконечный скролл)

В последнее время реализация этой идеи встречается все чаще и чаще — подгрузка новостной ленты на Фейсбуке, изображений в поиске Гугла, фотографий в альбомах Вконтакте, и т.д.

Если вы хотите реализовать бесконечный скролл у себя, то рекомендую взглянуть на infinite-scroll.com.

Там, во-первых, можно найти плагин для вордпресса, во-вторых, плагин для jQuery, который уже можно будет прицепить к любому движку, лишь бы у вас уже был обычный переключатель страниц.

Основанный на этом же скрипте, плагин для друпала — Inifinite Scroll jQuery plugin for Drupal.

На этом у меня все. Вопросы и дополнения приветствую в комментах.

Комментарии — 23

Спасибо за подборку.
Посмотрел Lazyload, не понял зачем там в src каждой картинки print time()

Отличная подборка. Особенно порадовал Inifinite Scroll для Drupal.
P.S. для предыдущего комента: чтобы избежать проблем с кэшированием.

Спасибо, возможно пригодится... :)

думал что в статье будет разобран процесс как делать ленивую загрузку, бесконечный скролл, а увидел только ссылки на скрипты.

Вместо картинок, которые я не вижу подгружается плашка нужного размера или картинка вообще не грузится?

Насколько это экономит мощности сервера? Вот без плагина загрузка одна, а если его подключить быстрее будет или нет?

Можно плз об этих двух вещах по-подробнее.

Жека, а в случае с "бесконечным скроллом", как реагируют поисковики? им выводится весь контент?

Сам хотел про LazyLoad написать у себя на сайте) Ладно, я там хотел поподробнее описать работу с jQuery LazyLoad, а то на оф.сайте на инглише... За свежую версию большое спасибо)))

LazyLoad конфликтует с thickbox. Придется от идеи отложенной загрузки отказаться.

Nevimi,
>Вместо картинок, которые я не вижу подгружается плашка нужного размера или картинка вообще не грузится?
Сам принцип работы плагина в том, что все картинки, выбранные по селектору заменяются одним маленьким изображением. А когда это изображение попадает в зону видимости, оно заменяется необходимым изображением.
>Насколько это экономит мощности сервера? Вот без плагина загрузка одна, а если его подключить быстрее будет или нет?
Предположим, что вы выводите пользователю изображения по поиску (типа поиска по картинкам в яндексе). Все изображения необходимо ресайзить до нужного размера. А эта операция будет потреблять ресурсы сервера. Даже если картинки сохранены на диск, их чтение - тоже операция. И если пользователь даже не увидит это изображение, то зачем его считывать?

TIgor,
Почему конфликтует? С помощью LazyLoad можно выбрать класс изображений, которые будут грузиться лениво, а не все картинки на странице - поэтому я думаю что все можно настроить.

Вано,
поисковики реагируют так, как браузер с отключенным js. Поэтому кроме LazyLoad должна быть реализована обычная пагинация - как для поисковиков, так и для пользователей без js.

Alex,
я думаю, что мы сделаем статью, посвященную ленивой загрузке контента. Эту статью хотел сделать обзорной.

Актуально особенно для фотосайтов с их долгогрузящимися фотками. Спасибо.

Добрый вечер, помогите, я использу LazyLoad + замену картинок при их отсутсвии..
вот скрипт


//No Pic
$(document).ready(function() {
    $('img.postImg').error(function() {
        $(this).attr({
        src: 'templates/test/images/addons/no_picture.png',
		class: 'img.postImg_ERROR',
        title: 'NO IMAGE',
        style:'border:0px;width:150px;height:150px;'
        });
    });
    $('img.thumb').error(function() {
        $(this).attr({
        src: 'templates/test/images/addons/no_picture.png',
        title: 'NO IMAGE',
        style:'border:0px;width:150px;height:150px;'
        });
    });
});

Так, вот, в случаее отсутствии картинки, замена производится только если пропавшая картинка находится в видимой части экрана, если же нет то LazyLoad ни чего не подгружает, это можно как то поправить?

Inifinite Scroll для Drupal _ очень интересный клип.

не уверен что это очень нужный плагин, применять его стоит на сайтах с больши количеством изображений, например уроки фотошоп. Обвешивание блога различного рода рюшечек может еще сильнее сказаться на времени загрузки страницы.
Я с мобилы не увидел не одного изображения которые должны были появиться при прокрутке. Пренебрежение мобильным трафиком тоже не есть хорошо ИМХО. Кто-нибудь в 7 осле проверял как работает сие произведение научной мысли? А так статья неплохая спасибо.

1nfecting - это можно поправить, если ты знаешь javascript, а не только в плагинах ковыряешься.

Интересный скрипт, да и очень нужный... а на vremenno . net какой скрипт используется если не секрет?

У нас используется LazyLoad jQuery Plugin

Evgenij, понятно, я уже прикрутил у себя на сайте, работает отлично... просто интересно как у вас сделанно, при просмотре исходника страницы привязки ява скриптов нет...

такой еще вот вопрос, а картинки если обновить страничку всегда загружаются по новому ? или все таки остаются в кеше браузера ?

Данный плагин не работает на текущий момент в современных браузерах

единственный вариант отказаться от поддержки браузеров с отключенным javascript
https://github.com/JamesKovacs/jquery_lazyload/commit/d481987d936cce2d777e7ce1a7f50090e348b7f1

Как раз искал это для своего блога на WordPress! Спасибо!

раз уж речь зашла об использовании Lazyload - плагинов, то рекомендую ознакомиться и добавить в копилку JAIL от Sebastiano Armeli-Battana. кстати, он вполне обоснованно говорит о преумуществах своего плагина по сравнению с другими подобными, приведенными в Вашей статье.

Спасибо, Дмитрий. Действительно, хорошая вещь.

Новый комментарий

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Имя

Эл. почта используется для Граватарки

Сайт

Имя в Твиттере

Сообщение

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

разрешенные теги или посмотреть как будет выглядеть

Спонсоры

Последние комментарии

Мы в соцсетях

Блогорол