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

如何延迟弹出模式内容加载直到它打开？

1 个答案: