Это делается в 2 этапа:
1. Готовим размытую картинку того же размера что и оригинал. Делаем приличное размытие, максимально возможное сжатие. Так чтобы весила как можно меньше.
2. Подключаем плагин LazyLoad. Который загружает нужные изображения по мере того, как пользователь докручивает страницу до них. В нашем случая новая картинка появится поверх размытой, создавая нужный вам эффект загрузки.
Можно сделать вручную по другому (минимум JS). Например так:
1. Берем нашу подготовленную размытую картинку, ставим ее на нужное место.
2. Немножко JS чтобы навесить на корневой элемент класс loaded.
$(window).on("load", function () {
$(document.body).addClass("loaded");
});
3. Далее в CSS-е, меняем изображение, если класс loaded присутствует.
.test {
background-image: url("blured.jpg");
}
.loaded .test {
background-image: url("normal.jpg");
}
