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

Віталий

5 років ago

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

В этой статье хочу показать маленький, но полезный скрипт, который поможет вам загружать 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 с задержкой.

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

Exit mobile version