Задать вопрос

Постепенная загрузка изображения?

На некоторых сайтах встречал такой интересный эффект: большое изображение при загрузке сначала выдает малопиксельную версию, а затем, по мере загрузки, качество улучшается.

Как такое реализовать?

В голову пришла идея сделать два div. Один, который позади другого имеет background сжатой версии изображения. А тот, что сверху - background с нормальным качеством.
Тогда при загрузке страницы сразу прогрузится первая низкокачественная картинка, а уже поверх нее будет грузиться нормальная. Но это явно костыль.
  • Вопрос задан
  • 4114 просмотров
Подписаться 3 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Frontend-разработчик: тариф PRO
    10 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию
    6 месяцев
    Далее
Решения вопроса 2
aliencash
@aliencash
Партизан
Это прогрессивный jpg. Погуглите. Тут не надо ничего выдумывать.
Ответ написан
Hecc
@Hecc
Frontend. Дизайн. Шрифт.
Это называется progressive jpg - погуглите.
https://habrahabr.ru/post/165645/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
dom1n1k
@dom1n1k
Ключевые слова для поиска - image lazy loading
Например: https://css-tricks.com/snippets/javascript/lazy-lo...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы