Остання перевірка показала, що зображення займають більше 50% від всього розміру сайтів з Топ-1000. Думаю, в вашого сайта ця статистика не буде сильно відрізнятися. І коли постає задача пришвидшити завантаження сайту, зображення — перше, на що падає погляд. Є купа інструментів, що допоможуть вам стиснути зображення без втрати якості (наприклад, Online Image Optiizer). Але що робити, коли все вже стиснено, але все одно повільно? От тут в гру і вступає ліниве завантаження. Lazy loading — патерн проектування, коли елемент не завантажується чи обраховується доки в цьому немає необхідності. Тобто зображення не завантажаться доки вони не з'являться в вікні браузера.
В цьому пості ми розглянемо 5 скриптів, що дозволяють легко це організувати. Почнемо з найпростіших, закінчимо скриптами з найбільшою кількістю фіч.
#1 Сім рядків коду на JavaScript
Першим ми розглянемо найпростіший спосіб, який займає всього сім рядків коду. Вам лише слід замінити атрибут src у зображень на якусь гіф, що сигналізує про завантаження, або зовсім його прибрати. А посилання на справжнє зображення винести в атрибут data-src:
<img>
<img src="spinner.gif">
В першому зображенні в src вказано base64, який описує прозору gif. А потім вам потрібно лише в кінець сторінки додати наступний JavaScript, який сканує зображення на наявність атрибуту data-src і завантажує їх контент коли завантажиться сторінка:
window.addEventListener('load', function(){
var allimages= document.getElementsByTagName('img');
for (var i=0; i < allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false);
Це дійсно працює, тому що зображення завантажуються вже після основної сторінки. Тож, в підсумку маємо:
Плюси:
-
Просто і зрозуміло.
-
Всього 7 рядків коду.
Мінуси:
-
Все ще завантажує всі зображення, незалежно від того бачить їх користувач чи ні.
-
Якщо основна сторінка в вас теж досить велика, пройде багато часу доки користувач побачить зображення.
#2 Echo.js
Echo.js — це наступна ланка в нашому ланцюжку рішень для лінивого завантаження. Бібліотека без залежностей, розміром близько кілобайту. Вона фокусується лише на лінивому завантаженні зображень коли вони потраплять в вікно браузера, без всяких викрутасів.
Простий приклад використання:
<img src="img/blank.gif">
<script src="dist/echo.js"></script>
<script>
echo.init({
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
</script>
В підсумку:
Плюси:
-
Немає ніяких залежностей.
-
Всього 1 кб.
-
Може завантажувати і фонові зображення.
-
Підтримує виклик функції при завантаженні зображення.
Мінуси:
-
Немає вбудованої гіфки, що сигналізує про завантаження зображення чи анімації при завантаженні.
-
Не працює з зображеннями всередині DIV, в яких є власний скрол.
#3 BLazy.js
Ця бібліотека трохи більша за попередню, вона займає 1.6 кб, але містить набагато більше функцій. Окрім звичайного завантаження ви також можете вказувати різні зображення для різних екранів (щоб не завантажувати зображення шириною 720px для екрану шириною 320px). Також можна вказати окремі зображення для екранів підвищеної чіткості (retina). І нарешті, завантаження працює і всередині контейнерів, що мають власний скрол. Невеличкий приклад:
<img class="b-lazy">
<script src="blazy.js"></script>
<script>
// Ініціалізація
var bLazy = new Blazy();
</script>
Плюси:
-
Маленький розмір.
-
Все ще без залежностей.
-
Окрім простого завантаження зображень, може завантажувати окремі зображення для різних екранів.
-
Працює з зображеннями всередині контейнера з скролом.
Мінуси:
- Все ще немає вбудованого переходу чи гіфки-спінера, тому потрібно реалізовувати власні.
#4 jQuery Lazy
Тепер ми вже зайшли на територію jQuery. Якщо ваш сайт вже його використовує, то чому б не взяти готовий плагін? А якщо ні, то подумайте, чи не перекриють 32кб jQuery ту вигоду від лінивого завантаження зображень?
jQuery Lazy — маленький (1.27кб) jQuery-плагін, який дозволяє завантажувати зображення і в горизонтальних контейнерах (наприклад, каруселі). Також у плагіна є доповнення (2.27кб), яке дозволить вам ліниво завантажувати інший контент (iframe, аудіо, відео). До того ж цей плагін розміщений на cdn, тому встановити його буде доволі просто.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js" type="text/javascript"></script>
<img class="lazy" src="img/blank.gif">
<img class="lazy" src="img/blank.gif">
<img class="lazy" src="img/blank.gif">
<script>
$(function() {
$('.lazy').lazy();
});
</script>
Плюси:
-
Підтримує CDN, тому не потрібно завантажувати файли на свій сервер.
-
Працює як з вертикальними, так і горизонтальними контейнерами.
-
Підтримує встановлення анімації завантаження.
-
З доповненням може завантажувати аудіо, відео та інше.
Мінуси:
- Потребує jQuery.
#5 Lazy Load XT
І останній плагін — Lazy Load XT. Він особливий тим, що має дуже великий функціонал, який реалізується доповненнями (іншими файлами .js чи .css). Головний скрипт вже підтримує завантаження всередині як горизонтальних, так і вертикальних контейнерів, а також з нескінченним скролом. А за допомогою доповнень можна реалізувати анімації, зображення-прелоадери, різні зображення для різних екранів.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.0/jquery.lazyloadxt.min.js"></script>
<img src="img/blank.gif">
<img src="img/blank.gif">
<img src="img/blank.gif">
Плюси:
-
Розміщений на CDN.
-
Прекрасно виконує свою основну задачу.
-
Підтримує анімації й переходи.
-
З доповненнями може працювати з iframe, відео тощо.
Мінуси:
-
Потребує jQuery 1.7+.
-
Для деяких фіч доведеться включати додаткові файли в проект.
Ще немає коментарів