Как сделать отложенную загрузку изображений?

Здравствуйте! Большое спасибо тем, кто помогает :)
Как сделать что бы картинка на сайте загружалась не кусками сверху вниз, а сразу отображалась пользователю. Даже тем, у кого слабый интернет? На многих сайтах видел как картинка больших размеров появляется сразу, немного размытая, затем отображается в нормальном качестве. Суть в том, что бы картинка которая весит достаточно много сразу отображалась , а не загружалась сверху вниз кусками. Что бы в виде предварительного просмотра картинка отображалась целиком, но размыто. Может есть какие нибудь альтернативные пути решения этой проблемы?
У меня в карточке фильмы есть изображение больших размеров, нужно что бы оно быстрее показывалось. Картинку сжимал, всё равно долго грузится.
a9dc59d7c7cd4500bdbec48456a34b99.png
Заранее спасибо за советы!
  • Вопрос задан
  • 3198 просмотров
Решения вопроса 1
AMar4enko
@AMar4enko
При загрузке изображения к материалу вы, помимо основных манипуляций, таких как создание миниатюр, обрезание, переконвертирование, создаете еще одну миниатюру, очень мелкую, например с шириной стороны 64 пикселя, конвертируя это все в jpg, после чего получившийся файл сохраняете в base64 и храните в базе вместе с основной информацией.
Это позволяет вам встроить эту миниатюру непосредственно в html-страницу в момент отдачи.
Вставляете ее прямо в тэг через style="background-image: url(base64...)", а через внешний css растягиваете на весь элемент, ну и еще можно блур вкорячить.
В итоге у вас моментально после загрузки страницы не пустые места, а некий размытый силуэт изображения. А после того, как основная картинка загрузится - встанет поверх.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
IonDen
@IonDen
JavaScript developer. IonDen.com
Это делается в 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");
}
Ответ написан
@karminski
Senior React.JS Developer
Ну вообще то далеко ходить не надо. Еще со времен начала 2000-х всем веб-дизайнерам известна магическая штука под названием "interlacing". Вот неплохая статья про это (на англ.) https://blog.codinghorror.com/progressive-image-re...
Ответ написан
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
вообще в фш есть функция при сохранении изображения.
в png к примеру:
igtEXTjvekOkPt8GgyLzg.jpg
в jpg:
CSMKaZpYkEO2Z7HJW8sjXw.jpg
Ответ написан
Ваш ответ на вопрос

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

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