Створення свого прогресивногозавантажувача зображень

попередній перегляд малюсіньке. Можливо, сильно стиснутий JPEG, 20px завширшки. Файл може важити менше ніж 300 байт, він з'являється миттєво, надаючи відчуття швидкого завантаження. Реальне зображення підвантажується при необхідності за допомогою методу лінивого завантаження.

Прогресивні зображення добре, але поточні рішення трохи складні. На щастя, можна створити своє на HTML5, CSS3 та JS. Код буде:

швидким та легким – всього 463 байта CSS та 1 007 байта JS (у мініфікованому вигляді);

підтримувати адаптивні зображення для завантаження альтернативних версій під великі екрани або екрани з високою роздільною здатністю;

без залежностей – працюватиме з усіма фреймворками;

працювати у всіх сучасних браузерах (IE10+);

працювати в старих браузерах з техніки прогресивного покращення, або коли JS або завантаження зображень відмовили;

легким у використанні.

Наше демо та код на GitHub

Ось так виглядає наша техніка:

Завантажити код з GitHub

Для створення прогресивних зображень візьмемо простий HTML-код:

full.jpg - повнорозмірне зображення, що зберігається в href, а

tiny.jpg – наше маленьке прев'ю.

Обидва зображення повинні мати однакове співвідношення сторін. Наприклад, якщо full.jpg має розміри 800 х 200, співвідношення сторін складає 4:1. попередній перегляд tiny.jpg має бути 20 х 5. Не можна поставити ширину 30px, тому що тоді потрібна буде неможлива висота 7.5px.

Зверніть увагу на класи на посиланні та прев'ю зображенні. Це будуть наші хуки у JS.

Інлайнувати або не інлайнувати зображення

Прев'ю зображення можна заінлайнувати як data URI.

Інлайнові зображення з'являються миттєво, вимагають менше запитів HTTP і зайвий разне перебудовують сторінку. Однак:

інлайнове зображення набагато складніше вставити та змінити (може допомогти Gulp);

кодування base-64 менш ефективне і на 30% більше, ніж бінарні файли (хоча вага компенсується додатковими заголовками HTTP запитів);

інлайнові зображення не можна кешувати. Вони кешуються в HTML-сторінці, але їх не можна використовувати на іншій сторінці без повторної посилки даних;

HTTP/2 прибирає потребу в інлайнових зображеннях.

Будьте прагматичні: інлайнові зображення підходять, коли сторінка одна, або коли невеликий код, тобто. не набагато більше URL!

Почнемо зі стилів контейнера для посилань:

У коді вище задано основні властивості макета. При необхідності до посилання можуть застосовуватися інші стилі та класи для встановлення розмірів та позиції.

Можна спробувати встановити точні розміри або виставити співвідношення сторін через padding-top. Так контейнер отримає розміри до завантаження зображення, що позбавить нас перебудови сторінки. Потрібно буде обчислити розміри та/або співвідношення ширини до висоти всіх зображень. Я не став ускладнювати все:

прев'ю та велике зображення повинні мати однакове співвідношення сторін (див. вище);

прев'ю зображення визначатиме висоту контейнера майже миттєво через інлайнову вставку або просто швидке завантаження.

І знову, будьте прагматичні: якщо встановити ширину і висоту контейнера, продуктивність підніметься, але це буде особливо помітно на сторінках з великою кількістю зображень, наприклад, галерея (де у всіх зображень однакове співвідношення сторін).

Клас завантаження на контейнері видаляється після завантаження повного зображення та вимкнення кліка. Тому можна видалити стандартний курсор:

---