加载页面时，隐藏而不加载所选div的内容。 点击加载时选择的div及其内容

Question

因此，我尝试进行谷歌搜索，但似乎这不是我最强的部分。

示例：我有一个div，其中嵌入了一个视频，但是要显示该视频，我必须先在div上单击并打开并显示该视频。 问题是它在页面加载时加载。 当有div的视频中有超过4-5时，它会使浏览器滞后。 我如何才能使其不随pageload一起加载，而仅当单击div时才加载，而在再次单击div时卸载其内容。

$('.cont').hide();


$('h4').click(function () {
    var $answer = $(this).next('.cont');
    if ($answer.is(':hidden')) {
        $answer.show();
    } else {
        $answer.hide();
    }
});

这就是我所拥有的，但不是我所描述的

Answer 1

<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
<a href="javascript:load(this)">Load</a>
<a href="javascript:unload(this)">Unload</a>
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>

这会加载/卸载iframe。 尽管您的代码只是将其隐藏，但这完全加载/加载了它。