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

我正在寻找类似的东西，但是对于iframes.

这对我来说很有效

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

---

.

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

您可以将src设置为about:blank吗？像这样

最近发布了一条专门针对iFrame的帖子，上面有基于Twitter引导的标签，我使用了一种我正在调用的技术。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>

$（'#myTabs'）.bind（'show'，function（e）{
//标识选项卡窗格
paneID=$（e.target.attr（'href'）；
//获取要用作iframe源的自定义数据属性的值
src=$（paneID.attr（'data-src'）；
//如果选定选项卡窗格上的iframe尚未加载。。。
if（$（paneID+“iframe”）.attr（“src”）=“”）
{
//使用自定义数据属性值更新iframe src属性
$（paneID+“iframe”）.attr（“src”，src）；
}
});

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

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

以WordPress插件形式

这是一个WordPress插件，您可以通过WordPress插件库下载并手动安装。我今天创建这个只是为了处理这种情况。无需对内容进行任何更改，一旦在任何和所有iFrame上激活，此功能将自动工作

---

最好的办法是在您想要加载之前不要将iframe添加到DOM中，这样就不会有混淆的机会了……iframe是硬编码到DOM中的。我没有手动插入它们的选项，否则这将是最简单的方法。因此，如果
src
是在DOM的html中硬编码的，请将它们更改为
data src
，然后根据需要将其更改为
src
，以加载内容？此外，我的事件不是基于滚动，而是单击
：target
s包含
div
。我尝试了它，但它不起作用（请参见上面的编辑），因此否决了投票。有一些有效的代码吗？我很乐意尝试一下，改变我的投票，选择这个作为答案。我很感激你的回答，我喜欢你解释背后的逻辑。我只是想要一个有效的解决方案作为答案。效果很好！非常感谢@Alex！：）iframe
src
是在DOM的HTML中硬编码的，不想通过用about:blank替换它，然后用URL（需要存储为变量）替换它来进行太多DOM操作。
iframe
嵌入到页面的HTML中，并在页面加载时加载，当您的示例加载
iframe
onClick时。这在我的情况下不起作用。