Скрипт ленивой загрузки изображений
Фреймворк

Скрипт ленивой загрузки изображений 0.2

JS-script для оптимизации сайта


Скачать

Краткая информация

Дата создания03 Фев 2013
Последнее изменение18 Фев 2019
Версия0.2

Техническая информация:

  • Язык: Javascript
  • Тестовый режим

Рано или поздно фронтендщик или веб-оптимизатор сталкивается с тем, что сколько изображения не сбжимай, а все равно с ними надо что-то делать. Оптимизировать изображения.

Выход давно известен — ленивая загрузка изображений.

Код для ленивой загрузки изображений

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

Концепция использования lazyload картинок

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

И, чтобы не происходило скачков при загрузке мы можем порекомендовать следующее:

  1. Унифицировать размеры изображений
  2. Подготовить для них placeholder-ы

Changelog:

  • v-0.2
    • Скрипт научился собирать не только src урлы, но и srcset
  • v-0.1
    • Скрипт отслеживает изображения по классам, загружает их отдельно, а потом возвращает на места