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

Question

[Виолетта Морозова]

Видела такое решение Lazy Load, но оно кажется каким-то топорным. Насколько я поняла, эта вещь живет уже очень долго, больше 6 лет точно. Может быть есть более современный метод отложенной загрузки? Может какой-нибудь "хипстерский" плагин со всякими эффектами, добавляющими мягкости появления изображения? )) Подскажите плиз!

P.S. проект на руби, никаких cms

Comments

[Kovalsky]

Приведённый вами пример реализации lazy load является самым базовым: если вы сами попробуете написать отложенную загрузку, то после отладки ваш код будет выглядеть почти так же; это минимальный функционал, необходимый для lazy load. А для мягкости и эффектов вам и правда достаточно будет CSS, мне кажется.

А у этого плагина, например, прямо в мануале написано, как можно использовать сторонние инструменты типа animate.css для реализации красивых анимашек. Даже демка есть.

Answer 1

[dom1n1k]

Из всех эффектов появления самый логичный и полезный - это то, как сделано у Медиума.
https://jmperezperez.com/medium-image-progressive-...
Они просто подставляют маленькую копию картинки (20x20, если правильно помню), которая весит какие-то копейки (и поэтому может быть вставлена в base64), но в размытом состоянии дает общие очертания картинки-оригинала.

Близкие аналоги:
https://css-tricks.com/the-blur-up-technique-for-l...
https://words.mxbry.com/a-workflow-for-lazy-loadin...

Answer 2

[Виолетта Морозова]

Пока что из норм вариантов вижу lazyload без jquery. Он может и просто подгружать картинки по мере скролла, а может еще поддерживать Progressive JPEG

Answer 3

[iBird Rose]

Может какой-нибудь "хипстерский" плагин со всякими эффектами, добавляющими мягкости появления изображения? ))

ajax + transition в css.

Comments

[Kovalsky]

То есть загружать изображения в base64?

[iBird Rose]

Никита Полевой: зачем? я к тому что подгружать изображения аяксом. без всяких там Lazy Load

[Kovalsky]

iBird Rose: как загружать изображения аяксом?

Речь о XHR2 и xhr.responseType = 'arraybuffer' / 'blob' ?

[iBird Rose]

Никита Полевой: в смысле как? берешь и грузишь аяксом при прокрутке страницы. также как и посты к примеру в бесконечном скролле с подгрузкой контента.

[Kovalsky]

iBird Rose: для отложенной загрузки изображений существует не так уж много вариантов: загрузка бинарных данных, загрузка base64 и переопределение src с эксплуатацией load событий. Вы о чем, о загрузке blob?

Покажите простейший пример.

[iBird Rose]

Никита Полевой: var img = new Image(image_url);
img.onload = ....

[Kovalsky]

iBird Rose: ага, я так и думал. Аякса тут нет и в помине. Это как раз то, что делает lazyLoad.

[Ильдар Гизетдинов]

Никита Полевой: у вас есть другие варианты? зачем использовать xhr, когда есть более просто способ на данный момент, для большинства сайтов. И да, это не аякс, но функцию выполняет примерно ту же (выполнение запроса в фоновом режиме).

[Ильдар Гизетдинов]

Никита Полевой: и да, чтобы вы не цеплялись к словам, под одной и той же функцией, я подразумеваю конкретно эту задачу, а не обобщено

[Kovalsky]

Ильдар Гизетдинов: другие возможные варианты я уже описал выше и я ни разу не говорил что вижу какой-то смысл их использовать. К тому же как раз об этом я и веду речь - о том, что незачем использовать xhr, когда есть более просто способ на данный момент.

[Виолетта Морозова]

Никита Полевой: Какой? переопределение src с эксплуатацией load событий?

[Kovalsky]

Виолетта Морозова: ну да, iBird об этом говорил. Только без переопределения, а просто с созданием нового Img, который пихается вместо исходного.