15.01.20

Lazyframe: ленивая загрузка Google Maps, Youtube, Vimeo

Lazyframe: ленивая загрузка Google Maps, Youtube, Vimeo

Здравия желаю, уважаемые коллеги и читатели моего блога! В данной статье, расскажу о таком замечательном плагине ленивой, отложенной загрузки (lazy load) Iframe – Lazyframe.js от разработчика — Viktor Bergehall.

Для чего это нужно

Не буду делать «открытие» что скорость загрузки сайта на данный момент весьма важна так как все больше и больше посетителей приходит с мобильных устройств. Особенно это касается лэндингов, ведь они, просто пестрят изобилием разнообразной инфографики, видео и всевозможными Iframe’ами.

Более того, почти у каждого лендоса внизу страницы есть карта проезда в виде Google Maps, чтобы потенциальный покупатель смог быстро сориентироваться, где находится компания, которая продает свои услуги или товар.


Читайте также:


Самая жесть

А когда «зеленый» разработчик (якобы проф., он именно так о себе думает) делает себе свой первый сайт с кучей видосов с Youtube, то такой проект просто подыхает от напряга, и соответственно посетитель уходит с такого сайта, не дождавшись загрузки хоть какого-то контента.

И поэтому, чтобы сайт открывался максимально быстро, я всегда использую в работе этот, честно сказать незаменимый плагин отложенной загрузки роликов ютюб и гугл карт. Он есть, как и просто js, так и готовым решением для WP — Iframe Lazy Load и Lazy Load Optimizer.

Рассматривать решение для WordPress в этой статье я не буду, если это необходимо, то пишите в комментариях, сделаю обзор на него.

Скачиваем

Первое что нужно сделать — скачать плагин с официальной страницы на GitHub, там же можете посмотреть дополнительные параметры и опции. Внизу поста также есть все линки.

Подключаем

Подключаем всего 2 файла из архива — lazyframe.css и lazyframe.min.js и инициализируем.

<link rel="stylesheet" href="lazyframe.css">
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="lazyframe.min.js"></script>
<script>
   lazyframe('.lazyframe');        // Селектор обертки Iframe (может быть любым)
</script>

Важно: если jQuery уже подключена, то еще раз подключать ее не нужно.

HTML разметка

<div class="lazyframe"                    // Селектор обертки Iframe
data-src="https://youtu.be/GTk-j40rbRU"   // Урл видео ролика
data-vendor="youtube"                     // Может быть «youtube», «vimeo» или «vine» (для карты параметр убираем)
data-title="Заголовок"                    // Указываем заголовок если он нужен
data-thumbnail="Заглушка">                // Указываем путь до заглушки (картинки)
</div>

Демо и архив

Протестировать и как это выглядит в живую можете по кнопке выше. А на сегодня все, удачи в нашем нелегком деле!

Не забудь про опросник
Как зарабатываешь мешки с $ ?