iframe only loads on click - php

Question

Is there a way to use jQuery to get an iframe to load on a click, i want this as is the iframe is hidden in a div that is not viewable until clicked, so the heavy majority of users will not be viewing the iframe, and i dont want the load time to be affected by the iframe.
This is one of the few things i've tried, the iframe does not load:
$(function() {
var emba=1;
var embget = 1;
$(".custemba").click(function(event) {
event.preventDefault(event);
if(emba == 1) {
emba = 2;
$('.custemb').slideDown();
if(embget == 2) {
$('.appendi').append('<iframe src="/player_i.php?aid=12" height="170px" width="100%" scrolling="no" frameborder="0"></iframe>');
embget = 2;
}
}
else if(emba == 2) {
emba = 1;
$('.custemb').slideUp();
}
});
});

Answer 1

Looks like
if(embget == 2)
should be
if(embget == 1)
And you don't need that extra event in
event.preventDefault();
Here's a simplified version:
var appendIFrame = true;
$(".custemba").click(function(event) {
event.preventDefault();
$('.custemb').slideToggle();
if(appendIFrame) {
$('.appendi').append('<iframe src="/player_i.php?aid=12" height="170px" width="100%" scrolling="no" frameborder="0"></iframe>');
appendIFrame = false;
}
});

Answer 2

The following works for me, a tad cleaner, creating the object before appending:
HTML:
<div>
Show iFrame
</div>
<div class="framebox"></div>​
JS:
var frame_loaded = false;
$(".showframe").click(function(event) {
event.preventDefault();
if (frame_loaded === false) {
var frame_element = $('<iframe>');
frame_element.attr({
src: "http://eatabagofdicks.com",
height: "170px",
width: "100%",
scrolling: "no",
frameborder: "0"
});
$(".framebox").append(frame_element);
frame_loaded = true;
}
$(".framebox").slideToggle();
});​