如何将弹出模式内容加载延迟到打开之前？

Question

我有一个非常重的<iframe>对象，该对象嵌入到弹出模式中。 但是， <iframe>对象与模式所在的主页一起加载（通常应该如此）。 除非用户打开包含<iframe>的模式，否则是否可以以某种方式阻止其加载？

模态本身当前看起来像这样：

<div id="popup" class="slickModal">
    <div class="window">
        <iframe width="1062" height="600" src="https://my.matterport.com/show/?m=XXXXXXXXXX" frameborder="0" allowfullscreen></iframe> 
    </div>
</div>

我的首要目标是保持页面加载速度尽可能低。 当前，没有此弹出模式的页面本身的重量不到800KB，但沉重的<iframe>对象将其增加到4MB +。

是否有其他类型的弹出模式系统仅在打开时才加载其内容，或者当前系统可以执行某些操作？

Answer 1

你可以做这样的事情

<div id="popup" class="slickModal">
    <div class="window"> 
    </div>
</div>

和你的脚本

$(function(){
$('#popup').on('show.bs.modal', function (e) { 
$('<iframe>', {
   src: 'https://my.matterport.com/show/?m=XXXXXXXXXX',
   width:'1062',
   height: '600',
   id:  'myFrame',
   frameborder: 0  
   }).appendTo('.window'); 
});
})