Lazy loading images with placeholder dominant color

Question

Я ищу, чтобы сделать что-то на том, как niice.co загружает свои изображения через ленивую загрузку.

Как вы можете видеть со своего сайта при прокрутке, перед ленивой загрузкой изображения фон div, где размещается изображение, на самом деле является доминирующим цветом изображения.

Я оглядывался и нашел несколько плагинов, таких как http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/, но не знаю, как они объединяют эти два.

Answer 1

Не сработает. Изображение не доступно во время загрузки. Вы можете проверить цвет в своем бэкэнде. Затем: Сохраните цвет в db и выведите шестнадцатеричный атрибут данных и используйте его как фон в javascript или непосредственно в стиле элемента. Или другое решение: используйте адаптивную фоновую библиотеку, если цвет не сохранен. Затем: вызовите API-интерфейс и сохраните шестнадцатеричный. При следующем запросе вы можете использовать hex с javascript или в стиле элемента.

Edit: Благодаря Эмпирическая для HowTo Ссылка: https://manu.ninja/dominant-colors-for-lazy-loading-images

Еще одно исполнение Типп: Не загружает все изображения в одно время. Это лучший UX для разделения запросов. Если у вас 8 изображений, по 4 на линию, загрузите первые 4 изображения. Если они финишированы: загрузите вторую строку и так далее. Еще одна важная вещь: если у вас небольшие изображения профилей и т. Д. (Например, stackoverflow), эта загрузка не загружается при загрузке содержимого. Точкой внимания посетителей является наиболее важный момент.