Lazy load iframe

I’ve just installed the jQuery lazy load plugin to dynamically load images when visitors scroll down, and it works really well.

Now, I’ve noticed that 40-50% of my page load time seems to be taken up with loading a Google maps iframe. The map iframe is useful but not essential. I’d love to lazy load it if possible, if not I’d add a ‘click here to load map’ button on the page.

Does anyone know if it’s possible to lazy load an iframe, and how it’s done? I’ve tried to tinker with the jQuery lazy load plugin to do the same thing for iframes, but it just ends up leaving a hole where the iframe would have been and it never loads. (Code at end of post)

Otherwise, can you point me in the direction of easy-to-implement script for a ‘Click here to load map’ option? (I’m a total coding/javascript newbie).

Or any other ideas to speed up / delay adding a Google map to a page?

*******

Here’s the code that didn’t work. I copied and pasted the plug in code and substituted ‘iframe’ for ‘img’:

function jquery_lazy_load_iframe_ready() {
$placeholdergif = plugins_url(‘images/grey.gif’, __FILE__);
echo <<<EOF
<script type=”text/javascript”>
jQuery(document).ready(function($){
if (navigator.platform == “iPad”) return;
jQuery(“iframe”).lazyload({
effect:”fadeIn”,
placeholder: “$placeholdergif”
});
});
</script>
EOF;
}

Then added

add_action(‘wp_head’, ‘jquery_lazy_load_iframe_ready’, 13);

at the end, following the format of the original code.

The changes didn’t harm the image lazy loading functionality, but as I mentioned the map iframe doesn’t load.