Блог

Я ищу наиболее эффективный способ предварительной загрузки изображений. Я знаком с ленивой загрузкой и т. Д., Но я ищу что-то конкретное. Например, LinkedIn при загрузке пытается предварительно загрузить общее изображение svg для всех сообщений перед загрузкой физических изображений сообщений.

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

Возможно, я Гуглю неправильную терминологию, но, насколько я понимаю, подход может заключаться в использовании комбинации атрибутов src и данных или, возможно, в переопределении загрузки изображения с помощью jQuery для загрузки заполнителя. Я не уверен, но если кто-нибудь может указать мне на какую-нибудь документацию или дать мне демонстрационную версию, это было бы здорово.

Заранее спасибо

Я думаю, что термин, который вы ищете, — это «заполнители» или, возможно, «заполнители изображений низкого качества». Предварительная загрузка обычно относится к использованию подсказок о предварительной загрузке ресурсов для более ранней загрузки ресурса. Для основных веб — функций, если вы решите использовать предварительную загрузку для изображений, вам, вероятно, следует ограничить ее использование одним изображением-возможно, изображением героя. Эти ссылки могут быть полезны:

• https://jmperezperez.com/medium-image-progressive-loading-placeholder/
• https://web.dev/patterns/web-vitals-patterns/placeholders/placeholders/