Содержание
Здравия желаю, уважаемые коллеги и читатели моего блога! В данной статье, расскажу о таком замечательном плагине ленивой, отложенной загрузки (lazy load) Iframe – Lazyframe.js от разработчика — Viktor Bergehall.
Для чего это нужно
Не буду делать «открытие» что скорость загрузки сайта на данный момент весьма важна так как все больше и больше посетителей приходит с мобильных устройств. Особенно это касается лэндингов, ведь они, просто пестрят изобилием разнообразной инфографики, видео и всевозможными Iframe’ами.
Более того, почти у каждого лендоса внизу страницы есть карта проезда в виде Google Maps, чтобы потенциальный покупатель смог быстро сориентироваться, где находится компания, которая продает свои услуги или товар.
Читайте также:
- Плавная прокрутка к якорю jquery со смещением и скоростью анимации
- Плагин ScrollUp — кнопка наверх для сайта на jquery
- Как с помощью jQuery добавить атрибут к элементу при клике
Самая жесть
А когда «зеленый» разработчик (якобы проф., он именно так о себе думает) делает себе свой первый сайт с кучей видосов с Youtube, то такой проект просто подыхает от напряга, и соответственно посетитель уходит с такого сайта, не дождавшись загрузки хоть какого-то контента.
И поэтому, чтобы сайт открывался максимально быстро, я всегда использую в работе этот, честно сказать незаменимый плагин отложенной загрузки роликов ютюб и гугл карт. Он есть, как и просто js, так и готовым решением для WP — Iframe Lazy Load и Lazy Load Optimizer.
Рассматривать решение для WordPress в этой статье я не буду, если это необходимо, то пишите в комментариях, сделаю обзор на него.
Скачиваем
Первое что нужно сделать — скачать плагин с официальной страницы на GitHub, там же можете посмотреть дополнительные параметры и опции. Внизу поста также есть все линки.
github.com/vb/lazyframe
Подключаем
Подключаем всего 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>Демо и архив
Протестировать и как это выглядит в живую можете по кнопке выше. А на сегодня все, удачи в нашем нелегком деле!
