这篇文章仅提供一个思路。随着浏览器版本的更新，该方法有可能会失效。

以谷歌地图的iframe举例。

假设HTML结构是：

<div class="footer-map"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10900.150874750521!2d139.7649905734196!3d35.68600042653089!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0f46a01e55%3A0x3cb9804a03c7234c!2z5rCX6LGh5bqB5pys5bqBIOadseS6rOeuoeWMuuawl-ixoeWPsA!5e0!3m2!1sja!2sjp!4v1523249338622" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe></div>

解决方法：

function embedGoogleMap() {
    if ($(".footer-map").find("iframe").length) {
        var map = $(".footer-map").html();
        $(".footer-map").find("iframe").remove();
        $(window).on("load", function () {
            setTimeout(function () {
                $(".footer-map").html(map);
            }, 500);
        });
    }
}
// 在ready事件中执行函数
$(function () {
embedGoogleMap();
});

原理：

当页面代码加载完毕时，即document ready时，把iframe代码赋给一个变量，保存在内存中，接着将iframe删除，终止iframe的加载。这个过程是很短暂的，几乎察觉不到。
再等页面所有元素加载完毕后，即window load时，再把iframe加回来加载地图。这样就能很好地避免地图无法加载而导致页面渲染遭遇阻塞。

注意：

这个方法容易忽略的问题是，HTML中的class名一定要跟函数里的jQ对象名（class名）一致。否则，jQ代码无法锁定iframe。使用时请严谨。