Как запустить элемент Div, когда загрузка страницы завершена

Question

У меня есть Html-страница, содержащая несколько div, что-то вроде этого:

<div id="div1">div1</div>
<div id="div2">div that contains youtube videos </div>
<div id="div3">div3</div>

Я хочу выполнить # div2 после загрузки страницы, есть ли способ сделать это.

PS: я хочу сначала загрузить всю страницу, после чего я хочу загрузить # div2 (и это потому, что # div2 содержит видео на YouTube, которые делают загрузку очень медленной.

Я нахожу несколько примеров кода:

Answer 1

Сделайте его невидимым при загрузке страницы

<div id="div1" style="display:none">
  <p><em>Your Desired div will show after 5 second(s).</em></p>
</div>

Затем сделайте его видимым после 5 секунд загрузки страницы:

$(function(){
  setTimeout(function(){
    $('#div1').show();
  },5000);
});

Надеюсь, это поможет вам

Answer 2

Сохраните URL-адрес iframe в атрибуте пользовательских данных data-src и после загрузки страницы вставьте его в src атрибут iframe.

$(function(){
  $("#div2 iframe").attr("src", function(){
    return $(this).data("src")
  }).parent().show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">div1</div>
<div id="div2" style="display:none">
  <iframe src="" data-src="http://youtube.com"></iframe>
</div>
<div id="div3">div3</div>

Answer 3

Вы можете использовать шаблон скрипта в качестве элемента по умолчанию, а затем заменить его при загрузке страницы.

$(window).on('load', function () {
  var $div2 = $('#div2');
  
  $div2.replaceWith( '<div id="div2">'+ $div2.html() +'</div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">div1</div>
<script type="text/html" id="div2">div that contains <b>youtube</b> videos </script>
<div id="div3">div3</div>