X
Заказать услугу

Как подгружать iframe с задержкой

Плагины и Шаблоны для Wordpress
  • 2019-11-13
  • 41 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

В этой статье хочу показать маленький, но полезный скрипт, который поможет вам загружать iframe с задержкой. Если вы занимаетесь версткой или наполнением собственного сайта и столкнулись с такой задачей, то этот скрипт, то что вам нужно. Данный скрипт у меня давно лежит в закладках, я ним иногда пользуюсь и давно хотел написать о нем статью, да все никак не доходили руки.

Как подгружать iframe с задержкой

Недавно, вновь столкнулся с задачей, когда обратился заказчик и попросил подсказать как загрузить iframe через 5 секунд после загрузки сайта. На примере ниже, вы можете посмотреть как загружается ролик с сервиса Youtube, который тоже подключен через iframe.



Пример

Работает все это, следующим образом. Сначала вам нужно добавить сам скрипт. Это обычный JavaScript, который нужно добавить к себе на сайт. Добавлять его можно куда угодно, если вы разбираетесь в верстке и понимаете, что подразумевает под собой фраза - куда угодно. Если нет, то можете воспользоваться статей Как и где подключить скрипт?, если не знаете как это сделать.

<script>
window.onload = function(){
	setTimeout(function(){
  	document.getElementById('my_ifrm').src = 'https://www.youtube.com/embed/LXb3EKWsInQ';
	},5000);
};
</script>

Так же, вы должны, само собой, добавить сам iframe на сайт ,если он добавлен, то ему надо добавить ID. В данном примере - это my_ifrm.

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/LXb3EKWsInQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Вам нужно сначала добавить нужный айди для iframe, а так же указать его в скрипте и изъять ссылку с iframe и добавить ее опять же в скрипт. Готовый iframe получится примерно таким:

<iframe width="560" height="315" id="my_ifrm" src=""  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Как видите у нас изменилось это - id="my_ifrm" src="". По желанию можете удалить размеры iframe, если задаете их через CSS, а так же другие, лишние параметры Youtube или самого iframe, если знаете для чего они.

Вернемся к самому скрипту. В третей его строке как раз и указан айди нашего iframe и ссылка, которую мы изъяли ранее.

document.getElementById('my_ifrm').src = 'https://www.youtube.com/embed/LXb3EKWsInQ';

В предпоследней строке есть значение 5000 - это 5 секунд в миллисекундах. Это именно то время, после которого будет загружен наш iframe.

Есть еще этот скрипт только уже в версии jQuery. По сути все тож, только для его работы нужно подключить библиотеку jQuery. Она может быть уже подключена, если нет, то это нужно сделать. Можете воспользоваться статей статьей, упомянутой выше о том как подключить скрипт.

Подключение выглядит так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Сам скрипт имеет следующий вид:

<script>
jQuery(document).ready(function($){
var src   = "https://www.youtube.com/embed/LXb3EKWsInQ"; 
$(function(){
  setTimeout(function(){
    $('#my_ifrm').attr('src',src)
  }, 5000);
});
});
</script>

В скрипте указываете ссылку, как и в предыдущем. Айди элемента, так же можно класс или селектор. Ну и само собой время, задержки перед загрузкой.

Вот и весь скрипт. Он простенький и справляется с задачей. Теперь вы сможете загружать iframe с задержкой.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 1, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.