Як працює відкладене завантаження?
Нормальне зображення в HTML виглядає так:
<img src="sample.jpg" width="100%"/>Плагіни відкладеного завантаження переписують код таким чином:
<img data-src="sample.jpg" width="100%"/>Як ви помітили,srcатрибут був змінений наdata-src.
Оскільки ніsrc, браузер спочатку не завантажує це зображення. Пізніше невеликий код JavaScript перевіряє, чи зображення в області перегляду (область перегляду користувача), і якщо воно всередині,data-srcповертається до того,srcякий браузер запускає завантаження та відображення зображення.
Що таке нативне відкладене завантаження?
Chrome поставляється з «рідним лінивим завантаженням». Ви можете прочитати про це тут.
Перевага нативного відкладеного завантаження полягає в тому, що немає потреби в JavaScript і, як правило, вона виконується набагато швидше, тому що браузер виконує її спочатку.
Код виглядає так:
<img src="sample.jpg" loading="lazy" width="100%"/>Що таке літаючі зображення?
Flying Images – це високопродуктивний плагін для відкладеного завантаження. Він використовує «рідне» відкладене завантаження браузера, якщо воно доступне, інакше використовуйте звичайний JavaScript для відкладеного завантаження.
"Літаючі зображення" також можуть завантажувати зображення ще до того, як зображення з'являться в області перегляду.
Ви боїтеся лінивого завантаження, тому що це погіршує роботу користувачів?
Чим літаючі зображення відрізняються від інших плагінів для відкладеного завантаження?
- Використовує вбудоване відкладене завантаження – використовуйте вбудоване відкладене завантаження, якщо воно доступне (в даний час підтримується лише в Chrome), інакше використовуйте JavaScript для відкладеного завантаження зображень.
- Завантажувати зображення ще до входу до області перегляду – у той час як інші плагіни завантажують зображення, коли вони знаходяться всередині області перегляду, літаючі зображення завантажують їх, коли вони збираються увійти в область перегляду.
- Крихітний JavaScript - всього 0,5 КБ, стислий, зменшений.
- За бажання можна використовувати тільки нативний - хочете підтримувати лише Chrome? Ви можете перейти на «тільки нативний», при якому JavaScript не впроваджується.
- Переписує весь HTML-код – ніколи не пропустіть зображення через ліниве завантаження (навіть якщо воно додано плагінами галереї).
- Прозорий заповнювач – до всіх зображень додається крихітний прозорий base64. Більше немає мерехтіння під час завантаження зображень.
- Виключити ключові слова – майже всі плагіни відкладеного завантаження надають функцію виключення, проте літаючі зображення також можуть виключати зображення з батьківського вузла зображень. Корисно, якщо ваше зображення не має імені класу.
- Підтримує браузери з відключеним IE та JavaScript – всі зображення завантажуються миттєво, якщо це Internet Explorer або навіть якщо JavaScript повністю вимкнено (з використанням
noscriptтега).
