Question

我正在寻找类似于jQuery image lazy load plugin的内容，但适用于iframe s。

Answer 1

这对我有用。

var iframes = $('iframe');

$('button').click(function() {
    iframes.attr('src', function() {
        return $(this).data('src');
    });
});

iframes.attr('data-src', function() {
    var src = $(this).attr('src');
    $(this).removeAttr('src');
    return src;
});

jsFiddle

Answer 2

最近发布了similar question特定于iFrames的基于Twitter引导程序的标签，我answered使用我正在调用Lazy Loading of iFrames的技术。 js / jquery如下;请参阅完整代码，包括小提琴中的html标记或我对OP的回复：

<script>
$('#myTabs').bind('show', function(e) {  

// identify the tab-pane
paneID = $(e.target).attr('href');

// get the value of the custom data attribute to use as the iframe source
src = $(paneID).attr('data-src');

//if the iframe on the selected tab-pane hasn't been loaded yet...
if($(paneID+" iframe").attr("src")=="")
{
    // update the iframe src attribute using the custom data-attribute value
    $(paneID+" iframe").attr("src",src);
}
});
</script>

Answer 3

您始终可以将src属性初始化为about：blank，然后当您的click事件触发时，将src属性设置为您要导航到的URL。

Answer 4

你能把src设置为about：blank吗？喜欢这个？

http://jsfiddle.net/MaUfH/

Answer 5

如果您想在WordPress中执行此操作

这是一个自动的请求减少解决方案

在WordPress插件表格中

这是一个WordPress插件，您可以通过WordPress插件存储库下载并手动安装。我今天创建这个只是为了处理这种情况。不需要对内容进行任何更改，只要在任何和所有iframe上激活，这都会自动生效。

https://wordpress.org/plugins/lowermedia-iframes-on-demand/

Answer 6

<iframe loading="lazy"

实现后，此功能将允许iframe无需任何JavaScript进入视口时进行延迟加载！

图像也有类似功能：How do you make images load lazily only when they are in the viewport?

对于iframes，我不确定状态如何，但似乎也有意启用它：

caniuse说有空：https://caniuse.com/#feat=loading-lazy-attr
https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element当前未提及loading，而https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element未提及
MDN将其标记为实验性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

要观察此情况，请在运行下面的代码段之前打开开发人员工具的“网络”标签。如果您的浏览器实现了该功能，则向下滚动到下一个iframe时，您可以清楚地看到新的网络请求！

测试结果：

Chromium 81：可以在悬停状态下正常工作
Firefox 77：失败，一次加载全部

document.getElementById('load-now').addEventListener('click', function(){
  for (const img of document.getElementsByTagName('iframe')) {
    img.loading = 'eager';
  }
});

.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}
#load-now {
  border: 5px solid black;
}

<div id="load-now">Click me to load all images now!</div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Donald_Trump"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Barack_Obama"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/George_W._Bush"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Bill_Clinton"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/George_H._W._Bush"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Ronald_Reagan"></iframe></div>

YouTube视频

对于YouTube嵌入式视频iframe，更具体地说：Lazy Load youtube video from iframe API

在Chromium 81上，它也可以在jsfiddle：https://jsfiddle.net/cirosantilli/3p0tk5nc上使用，但是在Stack Overflow上不能使用。我不知道为什么。删除loading="lazy"没有什么区别，所以我认为它由于其他原因而失败。

请记住，将YouTube视频嵌入到本地HTML文件也对我来说是随机失败的，这使得测试更加困难：Embed Youtube code is not working in HTML

document.getElementById('load-now').addEventListener('click', function(){
  for (const img of document.getElementsByTagName('iframe')) {
    img.loading = 'eager';
  }
});

.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}
  #load-now {
  border: 5px solid black;
  }

<div id="load-now">Click me to load all images now!</div>
<div><iframe width="560" height="315" loading="lazy"  src="https://www.youtube.com/embed/j_fl4xoGTKU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/TQ5k2u25eI8" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/FOwYDlay8rI" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/MRhAljmHq-o" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/wAQxIla7F68" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/_6D05gCWh_I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>

使用jquery延迟加载iframe（延迟src http调用）

6 个答案: