javascript-如何在jQuery折疊的div中延遲加載iframe直到單擊div /按鈕后？

Question

基本上，我在一頁上有很多這些折疊的div，在折疊的div內有iframe。 （我使用CSS使可點擊的div看起來像一個按鈕。）

問題是頁面加載需要很長時間，因為基本上每次頁面加載時，它都會加載每個iframe中的每個域。

我想延遲加載任何iframe，除非單擊div。

這是我目前的代碼：

Javascript

jQuery(document).ready(function() {
  jQuery(".cont").hide();
  jQuery(".title").click(function()
  {
    jQuery(this).next(".cont").slideToggle(500);
  });
});

HTML

<div class="layer1">
<p class="title">test</p>
    <div class="cont">
        <iframe src="http://example.com" scrolling="no"></iframe>
    </div>
    <div class="cont">
        <iframe src="http://example2.com" scrolling="no"></iframe>
    </div>
    <div class="cont">
        <iframe src="http://example3etc.com" scrolling="no"></iframe>
    </div>

仍然需要一個解決方案。

Answer 1

僅在單擊按鈕后將其插入DOM怎么樣？

jQuery(document).ready(function() {
    $("cont1").click(function()
         {
            $("cont1").html("<iframe src='http://example1.com' scrolling="no"></iframe>")
          }
    );

    $("cont2").click(function()
         {
            $("cont2").html("<iframe src='http://example2.com' scrolling="no"></iframe>")
         }
     );

});

等等。 然后您可以使用“刪除”按鈕來刪除html呢？