Лінива завантаження і поява зображень

15

Від автора: Зменшення часу завантаження зображень на даний момент один із самих швидких і легких способів підвищення продуктивності сайту. Час завантаження включає в себе багато понять: минификация зображень за допомогою інструментів типу ImageOptim і TinyPNG, data URI, спрайт, а також лінива завантаження зображень.

Такий тип завантаження трохи збиває з пантелику, зображення з’являються прямо з нізвідки, і щоб зображення не з’являлося дуже різко, можна застосувати плавне поява. Я просто обожнюю цей ефект. Якщо не встановити дозвіл зображення, то під час завантаження сторінка буде стрибати, і тільки потім плавно з’явиться зображення. Я бачив різні рішення цієї проблеми (деякі не найвдаліші, як мій минулий спосіб), і я вирішив поділитися з вами моїм новим методом.

Лінива завантаження і поява зображень

Посилання вкажіть через data-src.

Зображення з атрибутом data-src повинні бути невидимими, плавно зменшуючи прозорість:

img {
opacity: 1;
transition: opacity 0.3 s;
}
img[data-src] {
opacity: 0;
}

Ви вже можете здогадатися, що ми будемо робити з цим атрибутом під час завантаження зображення атрибут буде видалятися після завантаження зображення

function(img) {
img.setAttribute(‘src’, img.getAttribute(‘data-src’));
img.onload = function() {
img.removeAttribute(‘data-src’);
};
});

Так, мій метод потребує JavaScript, як ви могли помітити. Для старих браузерів додайте.

Лінива завантаження і поява зображень
Array.prototype.forEach.call(document.querySelectorAll(‘noscript img’), function(img) {
img.insertBefore(img.parentNode);
img.onload = function() {
img.removeAttribute(‘data-src’);
};
});

Це дуже легкий урок, але я бачив стільки способів його реалізації, що вирішив поділитися своїм; спосіб абсолютно робочий, проводилися тести навіть на зміну історії з допомогою AJAX (як у мене на сайті). Звичайно, цей спосіб відрізняється від справжнього, заснованого на прокручуванні сторінки, але для нього потрібно всіма улюблений плагін JavaScript. Але якщо ви шукайте простих рішень, то цей метод підійде.

ДЕМО