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

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

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

https://blurha.sh/

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

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

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

  • Дмитрий, это будет криво работать, там тоже канвас у телеги. Я еще пробовал с base64 играться, но слишком json разрастается + в базе все это хранить такое себе
  • Как вариант преобразовывать картинки в прогрессивные jpeg и оставить остальное браузеру
  • Лоурез превьюшки с цсс filter: blur()?
  • imko, тут нужно что бы она сразу в json приходила
  • NubasLol, пускай приходит) предзагружай его


    • + Заказать

     

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

     

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

      Для создания заглушки для изображения, подобной той, которую использует 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%;
    }

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

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