ポップアップモーダルコンテンツの読み込みを遅らせる方法を教えてください。

Question

私は非常に重いポップアップモーダルに埋め込まれたオブジェクトを持っています。しかし、オブジェクトは、モーダルが配置されているメインページと共にロードされます（通常はそうであるはずです）。何らかの形でそれが含まれているモーダルがユーザーによって開かれていない限り、がロードされないようにすることは可能ですか？

モーダル自体は現在、次のようになります。

<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> 

マイナンバー1の目的は、できるだけ低いページの読み込み速度を維持することです。現在、このポップアップモーダルのないページ自体の重さは800KB未満ですが、重いオブジェクトの方が4MB以上になります。

ポップアップモーダルシステムは、開いたときにのみコンテンツを読み込むか、現在のもので実行できるものがありますか？

Answer 1

あなたは

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