我有一个非常重的<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 +。是否有其他类型的弹出模式系统仅在打开时才加载其内容,或者当前系统可以执行某些操作?
最佳答案
你可以做这样的事情
<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');
});
})