延迟加载iframe？

Question

我知道有一些工具和技术可以延迟javascript的负载,但我有一个iframe,我想延迟加载,直到页面的其余部分完成下载和渲染(iframe是隐藏的,不会是显示,直到有人点击页面上的特定选项卡.有没有办法延迟iframe的加载？任何建议将非常感谢.谢谢!

Answer 1

您可以使用该loading属性来延迟加载 iframe。

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Answer 2

用jquery很容易!

要么封装你的代码,将iframe加载到a中,$() 要么使用$(document).ready(function(){}) 这些代码都是相同的,并在DOM准备好后执行你的代码!

例如

$(document).ready(function(){
    $('iframe#iframe_id').attr('src', 'iframe_url');    
});

请参阅http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 3

不知道是否需要在没有javascript的情况下运行.但最好的方法是在iframe之后直接更改src:

<iframe id="myIframe" src="http://.." />
<script type="text/javascript">
  var iframe = document.getElementById('myIframe').src = iframe.src;
  iframe.src = '';
  document.onload =  function(){iframe.src = src;}
</script>

使用$(document).ready将在构建DOM Tree之后开始直接呈现您的Iframe,但是在您加载的所有内容之前,我认为这不是您想要的.

jquery有事件.load,与onload相同(加载所有资源后)

$(window).load(function(){  iframe.src = src; }

Answer 4

我不明白为什么每个人都将 JAVASCRIPT 与 JQUERY 混淆，但是......

纯 JS 解决方案如下：（基本上它等待构建 DOM，然后加载页面中的所有 iframe）。

<iframe src="" data-src="YOUR ACTUAL iFRAME URL">
<script type="text/javascript">
      function load_iframes() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
      document.addEventListener("DOMContentLoaded", function(event) {
         load_iframes();
      });
    </script>

注意：小心使用 document.load 事件。任何有问题或需要 1 分钟加载的资源都会阻止您的代码执行。这个代码片段是从这个参考中调整的（用 domcontentloaded 代替 load）。

Answer 5

在 onLoad 事件或按钮单击处理程序中使用 Javascript 设置 iframe 的 src 属性。