Как лучше всего сделать загрузку видео, при скролинге к блоку с видео?

Question

[Сергей Сунцев]

На сайте имеется несколько коротких видеозаписей, которые воспроизводятся при наведении, весом около 3 мб.
При первой загрузке страницы страница из-за них довольно долго грузится. Естественно при повторной загрузке данные берутся из кэша и загрузка происходит быстро.
Есть идея при первой загрузке подгружать видео, не при загрузке страницы, а тогда, когда юзер проскролит вниз к контейнеру с ними.
Как это удобней всего реализовать с учетом того, что бы при повторной загрузке данные брались из кэша?

Answer 1

[Сергей Горячев]

Когда-то давно, делал подобное через viewportchecker.js.
В момент скролла до блока через replaceWith подгружал блок с видео.
Для красоты там еще стоял небольшой прелоадер.
https://jsfiddle.net/webirus/tt0uf3sj/ - добавление всего блока
https://jsfiddle.net/webirus/tt0uf3sj/1/ - добавление источников в html

Comments

[Сергей Сунцев]

Тоесть с помощью этого плагина можно загружать сами элементы с контентом или только аттрибуты?

[Сергей Горячев]

Сергей Сунцев: https://jsfiddle.net/webirus/tt0uf3sj/
Сначала подгружается только HTML, а при "докрутке до блока" заменяется содержимое блока на див с видео.

[Сергей Горячев]

Сергей Сунцев: Но вы можете поиграться с ним, и добавлять например только source, которого по умолчанию нет. Пример просто сделал. Через replave менять можно что угодно.

[Сергей Горячев]

Сергей Сунцев: Вот второй вариант, замена только Loading на source https://jsfiddle.net/webirus/tt0uf3sj/1/

[Сергей Горячев]

Сергей Сунцев: И последний вариант - https://jsfiddle.net/webirus/tt0uf3sj/2/ - замена непосредственно source.

[Сергей Горячев]

Сергей Сунцев: Не, с заменой src костылить придется) Не пускает уже пустые src.

[Сергей Сунцев]

Спасибо идею понял, это же называется Lazy Load

Answer 2

[Олег]

на 2 строках, приблизительно так ;) https://jsfiddle.net/sf7peykx/

Comments

[kn1ght_t]

жесть какая))

[kn1ght_t]

зачем там else? и вы бы хоть какой-нибудь счетчик поставили, чтобы при каждом чихе не вписывать этот айфрейм https://jsfiddle.net/sf7peykx/1/ и вообще, при чем тут ютуб с айфреймом, непонятно

[Олег]

kn1ght_t: Мля.Если делать все за кого то, то нах тогда работа))) Я просто показал вариант в какую сторону можно смотреть.
else тупо удалять при прокрутке вверх. И у автора хз откуда видео берется.Ютуб для примера.

[kn1ght_t]

Олег: зачем удалять загруженное видео? чтобы при прокрутке вниз снова его добавлять?) просто бомбануло немного, извиняюсь))

[Сергей Сунцев]

Олег: Пожалуй этот пример ухудшает идею, ускорения работы сайта, ведь надо сделать так, что бы видео загрузилось только один раз (используется тег video), а после бралось из кэша.

[Сергей Сунцев]

Олег: и нао сделать только загрузку, а не добавление в контейнер, тут без ajax, либо аналогичной технологии никак...