Как сделать заглушку для картинки как в телеграм?

1 ответ

Когда листаешь ленту, в нем сначала прогружается лищь очертание изображение, после его подгружается сама картинка. Но уже на этапе подгрузки видно очертания изображения.

Похожее нашел

https://blurha.sh/

Но там только цветовая схема сохраняется, в телег как-то получше это выглядит, и куда более качественный силуэт

Дополнительно:

Как вариант сделать размытые thumbnail и в кэш положить

Дмитрий, это будет криво работать, там тоже канвас у телеги. Я еще пробовал с base64 играться, но слишком json разрастается + в базе все это хранить такое себе

Как вариант преобразовывать картинки в прогрессивные jpeg и оставить остальное браузеру

Лоурез превьюшки с цсс filter: blur()?

imko, тут нужно что бы она сразу в json приходила

NubasLol, пускай приходит) предзагружай его

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Игорь Волков Ответ

Для создания заглушки для изображения, подобной той, которую использует Telegram, можно использовать технику называемую "ленивая загрузка" (lazy loading). Это позволяет загружать изображения только тогда, когда они попадают в зону видимости пользователя, что улучшает производительность сайта.

Для реализации заглушки для изображения вам понадобится создать специальное изображение-заглушку, которое будет отображаться до того момента, пока реальное изображение не будет загружено. Это может быть просто серая область с текстом "Изображение загружается...".

Далее вам необходимо использовать атрибуты `data-src` и `class` для тега ``. В атрибуте `data-src` вы указываете путь к изображению, которое должно быть загружено, а в атрибуте `class` вы указываете класс стилей для изображения-заглушки.

Пример кода на языке PHP:

<img data-src="путь_к_изображению.jpg" class="заглушка" alt="Заглушка для изображения">

Теперь добавим стили для класса "заглушка" в вашем CSS файле:

 
    .заглушка {
        background: url('путь_к_заглушке.jpg') center center no-repeat;
        width: 100%;
        height: 100%;
    }

.заглушка { background: url('путь_к_заглушке.jpg') center center no-repeat; width: 100%; height: 100%; }

Таким образом, когда страница будет загружена, изображение-заглушка будет отображаться вместо реального изображения до тех пор, пока оно не будет загружено. Пользователю будет показано, что изображение загружается, что улучшит его опыт использования вашего сайта.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ linkedin Из-за чего выкидывает из аккаунта LinkedIn? 1 ответ

Как сделать заглушку для картинки как в телеграм?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно