Задача: реализовать ленивую загрузку в Эгее

Это задание на разработку фичи в Эгее. Если вы хотите реализовать эту задачу, напишите мне.

Задача

Задача: снизить нагрузку на сервер и на браузер пользователя, реализовав умную ленивую загрузку изображений и видосов в Эгее.

Сейчас картинки и видосы залинкованы простыми тегами img и video без управления загрузкой. На странице может быть очень много таких объектов, и я хочу получить возможность гибко управлять их загрузкой. Важно добиться того, чтобы это не помешало пользователю пользоваться страницей.

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

Эгея должна уметь предзагружать картинки заранее, оценивая, как человек читает. Если он просто постепенно прокручивает, то надо, чтобы было загружено на несколько картинок и видосов вперёд. Если он взялся за полосу прокрутки и быстро крутит, периодически задерживаясь где-то, значит он что-то ищет — надо скорее загрузить все картинки, а видосы можно и не грузить. Если человек резко домотал страницу до низа, а потом сразу до верха, скорее всего он пытается добиться от загружалки, чтобы всё заранее скачалось — значит, всё должно скачаться. Это всё мои соображения, возможно, вы их чем-то дополните.

Хорошо бы, чтобы была возможность задать конкретные лимиты: не предзагружать больше X мегабайт или ещё что-то.

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

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

Важно, что вся эта автоматика должна распространяться только на выбранные картинки и видосы, а не на что попало. Возможно, они должны быть помечены в коде определённым классом или дата-атрибутом.

Ссылки по теме:

Результат

Во-первых, вариант минимум. Результатом должен стать скрипт управляемой загрузки, который можно будет добавить в набор скриптов Эгеи, и всё заработает. Не должно быть никакого кода, который нужно вызывать, чтобы скрипт «сработал»: он должен сам вызываться, когда страница к этому готова, просто потому что он к ней подключен, и действовать на все картинки и видосы, которые помечены соответствующим образом. У меня там есть Вебпак.

Во-вторых, вариант максимум. Вообще, у меня есть скрипт управляемой загрузки Эмёрдж. Он отвечает именно за порядок отображения и анимацию появления картинок, но не за управление их скачиванием с сервера. Идеально было бы вообще сделать Эмёрдж 2: переписать на чистом современном Джаваскрипте; добавить нужную Эгее логику; встроить в Эгею.

Ссылки по теме:

Условия участия

Если вам интересно такое сделать, напишите мне письмо. Какие у вас есть вопросы? Что в моём описании вызывает сомнения? Возможно, нормальные ребята делают не так, как я хочу, и вы мне всё объясните? Важно: я не смогу оплатить вашу работу, но смогу использовать её результаты в Эгее, в том числе в её платной версии. О вашем участии я, разумеется, напишу. Если вы выберете вариант максимум с докруткой Эмёрджа, условия обсудим отдельно.

Дальше
3 комментария
Andrew Golubev 2021

Илья, мне кажется это плохая идея. Браузеры уже умные, отложенная загрузка есть из коробки, а через пару версий они сами без всяких тегов и скриптов будут грузить только то, что в поле зрения. И логика у твоей идеи мудреная, да и за полосу прокрутки мало кто тягает. Есть же скролл и колесо мышки. И если надо пролистать страницу взад-вперед, я просто нажму END-HOME. То есть совершенно странное направление усилий в развитие функционала Эгеи. Уж лучше добавить понимание webp, avif, heif.

Илья Бирман 2021

Так «то, что в поле зрения» — это неправильно и не соответствует идее «картинка ждёт читателя». Браузеры делают говно, а я хочу сделать нормально. При чём тут полоса прокрутки — вообще не понял.

Anthony G. 2021

Специально для этого придумали loading=«lazy». Все остальные варианты — сразу нет.

Илья Бирман 2021

Оно не работает в Сафари, а судя по описанию, как надо не работает нигде.

Vladimir Novitsky 2021

Чтобы было меньше того, для чего нужна «ленивая загрузка» нужно реализовать «кат». Да, да. Какая бы патологическая неприязнь у Ильи ни была к «кату», но он нужен. Не у всех заметки размером с комментарий, бывают и длинные статьи со множеством изображений. Очень хороший вариант, сделать, чтобы последняя публикация выводилась полностью, а все, что ниже с кратким описанием или первыми фразами.

Господа, кто согласен с этим, напишите. Чтобы до Ильи дошел глас народа и он немного отошел от своих принципов.

Мои книги