javascript - 如何在页面加载完成时运行 Div 元素

Question

我有一个包含多个 div 的 Html 页面，类似这样的东西:

<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

您可能会使用脚本模板作为默认元素，然后在页面加载时替换它。

$(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>