"Ленивая" загрузка картинок + остановка гифок на плохом интернете
Этот пост касается только нового движка, на текущем основном реакторе все без изменений.
Что такое "ленивая" загрузка?
Это такое поведение сайта, при котором картинки, которые лежат где-то глубоко внизу, далеко от текущего экрана, не загружаются. Вы решаете промотать страницу вниз, и только тогда эти далекие картинки начинают подгружаться, потому что есть реальный шанс, что вы-таки до них домотаете.
Это полезно и с точки зрения экономии трафика, и с точки зрения более приоритетной загрузки именно тех картинок, у которых максимальный шанс быть посмотренными.
Раньше мы полагались на библиотеку nextjs в вопросе "ленивой" загрузки картинок, но в новой версии они - согласно современным практикам - отказались от своих механизмов и перешли на встроенные механизмы "ленивой" загрузки в браузерах. Стало лучше!
Для примера рассмотрим, как работает "ленивая" загрузка картинок в Хроме (и в браузерах на Chromium). С июля 2020 года разработчики браузера изменили расстояние от видимого экрана, на котором картинки начинают загружаться. Для быстрого интернета это расстояние уменьшили с 3000 пикселей до 1250 пикселей, для медленного - с 4000 пикселей до 2500.
Разработчики браузера говорят, что могут еще экспериментировать с этими порогами. Мы на этот встроенный механизм влиять не можем.
Сурс: https://web.dev/browser-level-image-lazy-loading/
В разных браузерах могут быть разные расстояния от видимой части экрана.
А что же гифки?
Гифки и гифковидео(видеогифки?) тоже подвластны этому механизму браузера. В дополнение мы в качестве эксперимента добавляем новый механизм остановки гифковидео для плохого интернета.
Если браузер решил начать загрузку видеогифки, но за 5 секунд загрузка не закончилась полностью, мы ставим видео на паузу и показываем контролы. Это выглядит вот так:
Браузер будет потихоньку буферизовать контент видеогифки, особенно если она находится у пользователя на экране. Это тоже встроенный механизм - браузер сам выбирает, загрузке какого контента отдать приоритет.
Пользователь может сам решить, интересна ли ему гифка, будет ли он ждать ее полной загрузки. Если гифка будет безжалостно промотана, браузер сильно понизит приоритет или вовсе остановит загрузку данных для этой видеогифки.
Обратная связь
Для нас новый движок - это тестовая песочница для новых фичей, построенная на довольно новых технологиях. Через 5 лет эти технологии перестанут быть столь новыми, и все будет работать на каждом утюге и чайнике. А пока могут быть проблемы, о которых вы можете нам сообщить, что поможет нам обкатать новый движок как следует.
Важно! Мы принимаем репорт только если у вас отключены все расширения браузера или вы используете "чистый" браузер. Если проблема возникает только с включенным расширением, то репорт надо слать разработчику расширения, а не нам.
В прошлый раз, когда мы тестировали редактор, было много проблем, связанных KellyC. Дело житейское, KellyC может просто не успевать отреагировать на наши изменения. Здесь можно подать репорт разработчику KellyC, если что-то вдруг сломается.
А вот инструкция как прислать репорт о баге на новом движке нам: https://m.joyreactor.cc/report
До связи, драгоценные!
Подробнее
Old threshold 3000px threshold Downloads 160KB Jfe, W r* . Downloads 90KB New threshold 1250px threshold Improved <img loading=lazy> data-savings! * demo numbers over 4G
новый движок,реактор
Помнится, эти браузерные lazyload штуки разработчики хрома выдвинули в уведомительном порядке, типа "теперь мы делаем так, остальные как хотите".
Если планируется, будут ли рассматривать PR (pidor request) ?
Заебало, когда не могут даже оптимизировать простенькую гифку и как будто целый фильм качаешь.
такой опустевший пост или коммент может содержать другую интересною информацию... возможно лучше сохранять какую то инфу о эмбеде к примеру его название
ну и где то его писать чтоб его можно было загуглить по названию потом...
for All
Погуглил... для ютуба вроде бы есть api для получения имени страницы с видео
https://stackoverflow.com/questions/2478391/get-youtube-videos-title-with-jquery-using-youtube-api/2478486#2478486
^говорит это открой:
https://gdata.youtube.com/feeds/api/videos/the-video-id?v=2&alt=json
||||
Но вроде с 2015го оно просит ключ того кто использует ютуб api
https://stackoverflow.com/questions/30685625/alternative-for-https-gdata-youtube-com-feeds-api-videos-video-idv-2/30685729#30685729
^говорит это открой
https://www.googleapis.com/youtube/v3/videos?id=video_id&key=YOUR_API_KEY&part=snippet
||||
Но! для айфреймов есть другой путь если создать "виртуальный" айфрейм то после его загрузки можно получить имя видео ....
Пример нашел здесь (в примере плей лист с нерабочими видео его нужно почистить/переписать но он рабочий вроде)
https://stackoverflow.com/questions/22726941/youtube-api-get-current-video-title/25035900#25035900
||||
В заключение сделал демку на основе ДжсФиддла который тоже нашёл в гугле
пример на основе ( https://jsfiddle.net/jpreynat/e11oy0eu/ )
https://jsfiddle.net/smg1kL3t/
||||
про ютуб айфрейм api что то
https://developers.google.com/youtube/iframe_api_reference?hl=ru
p.s. полезно или нет точно не знаю...
~_^ Удачи !
Добавить на джой конвертер здорового человека, чтобы перегонять вебм/мп4 в гиф по желанию, на крайний случай сделать эту функцию для бояринов.
А ты предлагаешь такой конвертор, потому что тебе все же нужен оригинал в гиф? Если да, в каких случаях он нужен?
Там вон ниже однострочник на баше кидали
Я тоже думал что программирование - это кнопки расставлять в визуальном редакторе. А потом стал программистом
Страдать
> Ебаться ради одного формата?
Да
ffmpeg -y -i %1 -vf "fps=8,setpts=1.0*PTS,scale=340:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=full[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" -loop 0 %1.gif
Также в настройках можно включить "гифки по клику", тогда эти гифковидео не будут тянуть трафика, пока ты не нажмешь на них кнопку play.
А то есть проблемные додики, которые вообще их не оптимизируют.
И тут как в лотерее - нажимешь кнопку и у тебя трафика тянет от 5-10 мб и до бесконечности.
Тут даже webm не помогает, я про исходные гифки вообще молчу, если у тебя лимит на трафик, то ты их в исходнике точно не будешь смотреть, а если будешь, то за пол дня активного браузинга - интернет будет все.
Большинство времени на лимитированном трафике буквально тратятся на - 'хочу ли я нажать на это'.
Иногда даже заебываешься и в ручную смотришь, сколько она должна весить.
а я то проклинаю двигло джоя за незагрузку картинок
просматриваю всегда полностью каждую страницу
Двигло джоя не знает, какие десять постов для меня не в игноре? Поэтому я должен n раз нажать Далее, чтобы увидеть хотя бы один пост?
А я не на новом сижу? Какой адрес?
Раньше пробовал, но что-то не работало или не мог найти. Теперь вроде всё нашлось.
Может, в тему, мне кто-то вкратце объяснит почему при заходе через впн (касается, например, теперь политики...), половина картинок и гифок не медленно грузятся, а вообще не грузятся и лишь пустые квадраты вместо них?
сижу через хром на андроиде, но на десктопе линки тоже нет, если я правильно помню
если бы была возможность скачать видеогифку как видео в формате webm, тебе нужна была бы возможность скачать гифку как картинку в формате .gif?
1. у гифок есть зацикливание, у видео нет;
2. гифки воспроизводятся сразу, видео по клику;
3. гифки можно сохранять в избранное, видео нельзя.
Возможность сохранить гифку, а не видео, должна остаться обязательно.
в общем, было бы круто шарить гифки так же просто, как линки или картинки
И вообще: во Славу Вождя!
Как ты смеешь вообще ставить под сомнение необходимость "не мыть" что - либо после того. как с тобой поздоровался сам Вождь!