Ленивая загрузка изображений: как не раздражать своих пользователей

Изображения встречаются в интернете везде. Они помогают обозначить критическую информацию, визуальный интерес и важные «точки остановки», между стеной текста. Иногда, изображения даже берут на себя основной фокус содержания.

Но большое количество изображений, может быть причиной долгой загрузки сайта, что скорей всего оттолкнет посетителей. Решить это можно используя «ленивую» загрузку изображений. Она сильно экономит полосу пропускания и сокращает загрузку сайта. Если пользователь не будет просматривать больше 10 изображений, зачем загружать все. Допустим, на веб-странице, есть 20 изображений, по 30 КБ каждое. Загружая только первые 10, мы экономим половину трафика, только за одно посещение.

Можно найти кучу подобных плагинов, которые делают возможной «ленивую» загрузку изображений, например - jQuery Lazy Load. Но все они потребуют некоторого изменения разметки. Вам потребуется добавить атрибуты height и width, ко всем изображениям, а также задать им .lazy класс. А все атрибуты SRC, нужно заменить на data-original.

Скачать jQuery Lazy Load: