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>

Answer 2

将iframe的URL存储在自定义数据属性data-src中，并在页面加载后将其插入iframe的src属性。

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

在页面加载时使其不可见

<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);
});

希望这对您有帮助

页面加载完成后如何运行Div元素

3 个答案: