Я реализовал эффект размытия, используя очень маленькое и легкое изображение, которое загружается первым, поскольку оно очень легкое, и как только фоновое изображение будет загружено, процесс отсрочки заменит data-src реальным изображением.
Моя проблема заключается в внезапном изменении, из-за которого фоновое изображение начинает мигать. Я хочу найти способ изящной «загрузки», в основном с эффектом затухания.
Ниже код:
function init() {
let imgDefer = document.querySelectorAll('[data-src]');
for (let i = 0; i < imgDefer.length; i++) {
if (imgDefer.getAttribute('data-src')) {
if (imgDefer.tagName === 'IMG') {
imgDefer.setAttribute('src', imgDefer.getAttribute('data-src'));
} else {
let style = "background-image:url({url})";
imgDefer.setAttribute('style', style.replace("{url}", imgDefer.getAttribute('data-src')));
}
}
}
}
И элемент:
...
Подробнее здесь: https://stackoverflow.com/questions/479 ... red-images
