How do I make <iframes> load only on a button click?

Question

Friends, My issue is that my page is really slow to load, because all of the load simeltaneously. I am pulling an RSS feed that if you click on the "article" button it will pop up a Modal that has the inside of it. The problem is that all of the s load simeltaneously.

here is the site: http://daisy.camorada.com/

I have tried inserting a src into the but that doesn't work because i guess the iframe loads when the page opens.

<button class='btn btn-primary' id='miguel'>TEST ME NOW</button>
        <button class='btn btn-primary' id='jamison'>jamison</button>
        <div id="yoyoyo">
            </div>
            <iframe id="gogo">
                </iframe>

<script>
        $('#miguel').on('click', function() {
            alert('clicked');           
            $('#gogogo').attr('href', 'http://www.google.com');

        });
    </script>
    <script>
        $('#jamison').on('click', function() {
            alert('clicked JAMISON');       
            $("#yoyoyo").html("<h1>HELLO J</h1><br><iframe class='full-iframe' href='http://news.yahoo.com/three-killed-tribal-clash-libya-001717827.html'></iframe>");

        });

    </script>

Answer 1

<a href="http://example.com" target="myiFrame">Click me!</a>
<iframe name="myiFrame" src="about:blank">

No JavaScript required.

Answer 2

Html:

<iframe id="myiFrame" data-src="http://my.url" src="about:blank">
</iframe>

In your jQuery:

$("button").click(function(){
    var iframe = $("#myiFrame");
    iframe.attr("src", iframe.data("src")); 
});

Or if you wanted to load ALL iframes when you click one button... make sure they all have a data-src="your.url" attribute, and then loop through like this:

$("button").click(function(){
    $("iframe").each(function(){
        $(this).attr("src", $(this).data("src"));
    });
});